[英]Jquery accordion menu (3 level) How to?
I have this jquery code: 我有这个jQuery代码:
$(document).ready(function(){
$("#accordion2 h3").click(function(){
//slide up all the link lists
$("#accordion2 ul ul").slideUp();
//slide down the link list below the h3 clicked - only if its closed
if(!$(this).next().is(":visible"))
{
$(this).next().slideDown();
}
})
})
And HTML: 和HTML:
<div id="accordion2">
<ul>
<li>
<h3>Articles</h3>
<ul>
<li><a href="#">Nature</a>
<ul>
<li>Wild life</li>
<li>Flowers</li>
<li>Animals</li>
</ul>
</li>
<li><a href="#">Earth</a></li>
<li><a href="#">Space</a></li>
<li><a href="#">Ocean</a></li>
<li><a href="#">Land</a></li>
</ul>
</li>
</ul>
</div>
How do i modify the jQuery code so that the user can slidedown the "Nature" and its contents? 我如何修改jQuery代码,以便用户可以向下滑动“自然”及其内容? 3 third level menu.
3第三级菜单。
I'm guessing this is what you are after? 我猜这就是你所追求的? If not, then please clarify your question.
如果没有,请澄清您的问题。
$(document).ready(function(){
$("#accordion2 h3").click(function(){
$(this).next().slideToggle();
})
$("#accordion2 ul ul li a").click(function(){
$(this).next().slideToggle();
})
})
Multi level Accordion: JSFiddle 多层次手风琴: JSFiddle
HTML HTML
<ul id="menu" class="menu">
<li><a href="#">Sub item A</a>
<ul class="sub-menu">
<li><a href="#">Sub Sub item A</a>
<ul class="sub-menu">
<li><a href="#">sub sub sub item a</a>
<ul class="sub-menu">
<li>sub sub sub sub item a</li>
<li>sub sub sub sub item b</li>
</ul>
</li>
<li>sub sub sub item b</li>
<li>sub sub sub item c</li>
</ul></li>
<li>sub sub item b</li>
<li>sub sub item c</li>
</ul>
</li>
<li><a href="#">Sub item b</a>
<ul class="sub-menu">
<li>sub sub item e</li>
<li>sub sub item f</li>
<li>sub sub item g</li>
</ul>
</li>
</ul>
JavaScript JavaScript的
function initMenu() {
$(".sub-menu").hide();
$(".current_page_item .sub-menu").show();
$('#menu li a').click(
function() {
var checkElement = $(this).next();
if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
console.log(checkElement.parentsUntil('#menu'));
$('#menu ul:visible').not(checkElement.parentsUntil('#menu')).slideUp('normal');
checkElement.slideDown('normal');
return false;
}
});
}
$(function() {
initMenu();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.