用jquery实现二级下拉菜单
<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上，二级菜单不消失。
展开
收起
1
条回答
写回答
写回答
-
用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; } }2019-07-17 19:17:03赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
