用jquery实现二级下拉菜单-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

用jquery实现二级下拉菜单

小旋风柴进 2016-05-27 09:31:30 1151
<div id="filters">
   <ul class="btn_filter">
        <li>
            <a class="dropdown" href="#filter_a">A</a>
        </li>
        <li>
            <a class="dropdown" href="#filter_b">B</a>
        </li>
        <li>
            <a class="dropdown" href="#filter_c">C</a>
        </li>
        <li>
            <a class="dropdown" href="#filter_d">D</a>
        </li>
        <li>
            <a class="dropdown" href="#filter_e">E</a>
        </li>
        <li>
            <a class="dropdown" href="#filter_f">F</a>
        </li>
    </ul>
    <div id="filter_a" class="filter" style="display:block">A</div>
    <div id="filter_b" class="filter" style="display:none">B</div>
    <div id="filter_c" class="filter" style="display:none">C</div>
    <div id="filter_d" class="filter" style="display:none">D</div>
    <div id="filter_e" class="filter" style="display:none">E</div>
    <div id="filter_f" class="filter" style="display:none">F</div>
</div>

这种下拉列表怎么做?当鼠标移动到li>a上,显示对应的div。而且鼠标能移动到div上,二级菜单不消失。

JavaScript
分享到
取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:17:03

    用jquery实现:

    var k=false; // 当前一级菜单Dom对象
    var r=false; // 当前二级菜单Dom对象
    
    $("#filters").find("a.dropdown").mouseover(function(){
        var A=this.getAttribute("href").replace(/^[^#]/,"");
        flagDomObj();
        k=$(this).addClass("current"); //为当前一级导航添加样式,且 k=true
        r=$(A).show();      //显示二级导航,且r=true
    }).click(function(){return false});
    
    $("#filters").mouseleave(function(){
        flagDomObj(); //鼠标移出导航栏,还原上一个事件
    });
    function flagDomObj(){ //鼠标滑动到另一个一级菜单上,还原上一个一级和二级菜单导航的状态
        if(k){
            k.hide();
            r.removeClass('current');
            k=false;
            r=false;
        }
    }
    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程