案例-下拉菜单

今天做一个如下动图所示的下拉菜单：

html代码

<body>
        <div class="wrap">
            <ul>
                <li>
                    <a href="javascript:void(0);">一级菜单1</a>
                    <ul>
                        <li><a href="javascript:void(0);">二级菜单1</a></li>
                        <li><a href="javascript:void(0);">二级菜单2</a></li>
                        <li><a href="javascript:void(0);">二级菜单3</a></li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);">一级菜单2</a>
                    <ul>
                        <li><a href="javascript:void(0);">二级菜单1</a></li>
                        <li><a href="javascript:void(0);">二级菜单2</a></li>
                        <li><a href="javascript:void(0);">二级菜单3</a></li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);">一级菜单3</a>
                    <ul>
                        <li><a href="javascript:void(0);">二级菜单1</a></li>
                        <li><a href="javascript:void(0);">二级菜单2</a></li>
                        <li><a href="javascript:void(0);">二级菜单3</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>

JavaScript代码

 $(function () {
        //需求: 给一级菜单li设置鼠标移入事件，二级菜单显示。
        //      给一级菜单li设置鼠标离开事件，二级菜单隐藏。

        //1.给一级菜单li设置鼠标移入事件，二级菜单显示。
        $('.wrap>ul>li').mouseover(function () {
            $(this).children('ul').show();//show()方法本质上还是更新display属性为block.
        });

        //2.给一级菜单li设置鼠标离开事件，二级菜单隐藏。
        $('.wrap>ul>li').mouseout(function () {
          $(this).children('ul').hide(); //hide()方法本质上还是更新display属性为none
        });
    });

思考

为什么不给一级菜单a标签设置鼠标移入和离开事件?

   //给a标签设置mouseover和mouseout事件
    $('.wrap>ul>li>a').mouseover(function () {
      $(this).siblings('ul').show();
    });
    $('.wrap>ul>li>a').mouseout(function () {
      $(this).siblings('ul').hide();
    });

运行结果：

出现的问题：当鼠标离开一级菜单，移动到二级菜单时，子菜单列表无法显示。
这是为什么呢？

再来看看HTML文件中各元素的关系：

    //这是一级菜单1的元素
    <li>
        <a href="javascript:void(0);">一级菜单1</a>
        <ul>
            <li><a href="javascript:void(0);">二级菜单1</a></li>
            <li><a href="javascript:void(0);">二级菜单2</a></li>
            <li><a href="javascript:void(0);">二级菜单3</a></li>
        </ul>
    </li>

可以看到<li>是<a>、<ul>的父节点，而<a>与<ul>是兄弟节点

若给<li>标签设置mouseover事件，当鼠标移动至二级菜单<ul>时，因为二级菜单是包含在li标签里面的，所以相当于鼠标还是置于li标签上。所以二级菜单还会显示。
但是，若给<a>标签设置mouseover事件,因为<a>与<ul>是兄弟节点，所以当鼠标离开<a>，移动到二级菜单<ul>时，执行的是$('.wrap>ul>li>a').mouseout(function () { $(this).siblings('ul').hide();)});所以二级菜单会隐藏。

案例-下拉菜单

思考

推荐阅读更多精彩内容