作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
单击子菜单链接时如何阻止 Accordion 菜单 ul.sub-menu 关闭?
当单击父项时, Accordion 会打开,但当单击其下一级的子菜单项时,它会再次关闭。
这是我的 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');
});
});
最佳答案
为您准备的 Accordion ,
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{
}
}
});
关于jQuery - 单击菜单项时停止折叠式菜单关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13606666/
我是一名优秀的程序员,十分优秀!