单击子菜单链接时如何阻止手风琴菜单 ul.sub-menu 关闭?
当单击父项时,手风琴会打开,但当单击其下一级的子菜单项时,它会再次关闭。
这是我的 HTML:
<ul class="menu">
<li><a href="#">parent 1</a>
<ul class="sub-menu">
<li><a href="#">1st child item</a></li>
</ul>
</li>
<li><a href="#">parent 2</a>
<ul class="sub-menu current-menu-parent">
<li><a href="#">2nd child item</a></li>
<li class="current-menu-item"><a href="#">3rd child item</a></li>
</ul>
</li>
<li><a href="#">parent 3</a>
<ul class="sub-menu">
<li><a href="#">4th child item</a></li>
</ul>
</li>
</ul>
这是我的 jquery:
jQuery(function($) {
$(".menu > li").children("a").attr('href', 'javascript:void(0)');
$('.sub-menu').hide();
$('.current-menu-parent').show();
$('.menu > li').click(function() {
$(this).find('ul').slideToggle('slow');
});
});
为你演奏手风琴,
HTML :
<ul class="menu">
<li><a href="javascript:void(0)">parent 1</a>
<ul class="sub-menu">
<li><a href="#">1st child item</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">parent 2</a>
<ul class="sub-menu current-menu-item">
<li><a href="#">2nd child item</a></li>
<li><a href="#">3rd child item</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">parent 3</a>
<ul class="sub-menu">
<li><a href="#">4th child item</a></li>
</ul>
</li>
</ul>
CSS:
<style>
.sub-menu{
display:none;
}
.current-menu-item{
display:block;
}
</style>
JS:
rel = 0;
$('.sub-menu').hover(function(){ // findind mouse postion
rel = 1; // if mouse on submenu
}, function(){
rel = 0; if mouse out submanu
});
$('.menu > li').live("click",function(){
if(!$(this).hasClass("active")){ // if not already opened
$('.sub-menu').slideUp(); // hide all other submenu
$('.sub-menu',this).slideDown(); // show which your clicked
$(".menu > li").remove('active'); // remove all active class in li
$(this).addClass('active'); //adding active class which your clicked li
}
else{
if(rel==0){
$('.sub-menu').slideUp(); // if clicked already opend parent that will close
$(this).removeClass('active'); // remove all active class
}
else{
}
}
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)