jQuery实战_下拉菜单的实现

深碍√TFBOYSˉ_ 2022-05-22 12:39 234阅读 0赞

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

mouseenter 和 mouseleave 一起使用  
mouseover 和 mouseout 一起使用  
  
**实例下拉菜单的实现：**  
**方法一：（常规）**  
**结构：**

**JS：**

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

**效果：**  
![这里写图片描述][70]  
**注意：**  
绑定事件为什么不是给 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();
    });

[70]: /images/20220522/cc35b316dd4847b096afe1ebd6309116.png