jQuery实战_下拉菜单的实现

mouseover事件和mouseenter 事件的区别
mouseover事件会触发多次,每遇到一个子元素就会触发一次。
mouseenter 事件只会触发一次。鼠标经过的时候只会触发一次

mouseenter 和 mouseleave 一起使用
mouseover 和 mouseout 一起使用

实例下拉菜单的实现:
方法一:(常规)
结构:

<div class="box">
    <ul>
        <li><a href="#">一级菜单1a>
            <ul class="erji">
                <li><a href="#">二级菜单1a>li>
                <li><a href="#">二级菜单2a>li>
                <li><a href="#">二级菜单3a>li>
            ul>
        li>
        <li><a href="#">一级菜单1a>
            <ul class="erji">
                <li><a href="#">二级菜单1a>li>
                <li><a href="#">二级菜单2a>li>
                <li><a href="#">二级菜单3a>li>
            ul>
        li>
        <li><a href="#">一级菜单1a>
            <ul class="erji">
                <li><a href="#">二级菜单1a>li>
                <li><a href="#">二级菜单2a>li>
                <li><a href="#">二级菜单3a>li>
            ul>
        li>
    ul>
div>

JS:

$(document).ready(function(){
    $('.box li').mouseenter(function(){
        $(this).children('ul').show();
});
   $(".box li").mouseleave(function(){
     $(this).children('ul').hide();
});
})

效果:
jQuery实战_下拉菜单的实现_第1张图片
注意:
绑定事件为什么不是给 li的 a 标签绑定?
答:因为a与下拉菜单是ul 是兄弟关系,mouseenter事件加到a元素上,当离开a的时候,ul会隐藏,只有将触发事件加到父元素,滑到ul上不会隐藏,因为mouseenter事件在子元素里同样有效果。

方法二:
  jquery 的hover()方法有两个函数,第一个是移上去的时候触发的事件,第二个函数是移开是触发的函数,刚好可以实现下拉菜单。

$('.box li').hover(function(){
     $(this).children('ul').show();
  },function(){
    $(this).children('ul').hide();
});


方法三:

$('.box li').hover(function(){
    $(this).children('ul').slideToggle();
});

你可能感兴趣的:(jQuery系列)