[英]JQuery slideToggle, collapse the child elements
我有一个带有可折叠子菜单的菜单,共有3个级别的菜单,它工作正常,但是当您单击以折叠父级子菜单时,我不知道如何折叠所有子级子菜单。
它的工作方式是,如果您单击级别1,它将扩展级别2,然后,如果您单击级别2,它将扩展级别3。
问题是,当所有级别都打开时,我需要能够单击级别1并同时折叠级别2和3。 我目前正在使用slideToggle。
我在下面粘贴了我的代码,我知道这是一种真正的垃圾处理方式,但是我不得不为菜单项分配虚假的H标签,因为它是由ASP:Menu控件生成的,并且没有为菜单项提供唯一的ID所以我必须找到解决方法。
HTML:
<div id="Div1" class="MenuBar">
<a href="#Menu1_SkipLink" style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;">Skip Navigation Links</a>
<div class="mainmenu" id="Div2">
<ul class="level1">
<li><a class="level1 staticItem level1">
<img src="/images/calculator.png" alt="" title="" class="icon" /><h7>Financial</h7></a></li>
<li><a class="level2 staticItem level2">
<h10>Address</h10>
</a></li>
<li><a class="level3 staticItem level3" href="javascript:openNewWin('/Controls/Financial/AddressBook.aspx')">
<h11>Address Book</h11>
</a></li>
<li><a class="level3 staticItem level3" href="javascript:openNewWin('/Controls/Financial/CustomerTypes.aspx')">
<h12>Customer Types</h12>
</a></li>
<li><a class="level1 staticItem level1">
<img src="/images/container.png" alt="" title="" class="icon" /><h8>Container</h8></a></li>
<li><a class="level2 staticItem level2">
<h13>Containers</h13>
</a></li>
<li><a class="level1 staticItem level1">
<img src="/images/product.png" alt="" title="" class="icon" /><h9>Product</h9></a></li>
</ul>
</div>
<a id="Menu1_SkipLink"></a>
</div>
jQuery的:
$(function () {
//When opening the page all level 2 and level 3 items must be hidden.
$(function () {
hideitems();
})
function hideitems() {
$('h10').slideUp();
$('h11').slideUp();
$('h12').slideUp();
$('h13').slideUp();
}
//Financial Click
$(document).ready(function () {
$('h7').click(function () {
$('h10').slideToggle();
});
});
//Address Click
$(document).ready(function () {
$('h10').click(function () {
$('h11').slideToggle();
$('h12').slideToggle();
});
})
});
因为我不是JS的高手,所以对于如何折叠所有子级别的任何建议将不胜感激。
在不更改标记的情况下:构建一个将子项链接到项的结构,并在.click()
回调中使用它。
例如,您可以使用$(...).data
将数据与节点关联:
// init function :
// we stack all level2 and level3 items as subitems of the last level1 item we met
// we stack all level3 items as subitems of the last level2 item we met
function init() {
var $menu = $('ul.level1');
var lv1Itm = null,
lv2Itm = null;
$menu.find('a').each(function () {
var subitems;
var li = $(this).closest('li').get(0);
if ($(this).hasClass('level1')) {
lv1Itm = li;
$(li).data('subitems', []);
}
if ($(this).hasClass('level2')) {
lv2Itm = li;
$(li).data('subitems', []);
$(lv1Itm).data('subitems').push(li);
}
if ($(this).hasClass('level3')) {
$(lv1Itm).data('subitems').push(li);
$(lv2Itm).data('subitems').push(li);
}
});
}
init();
$('.level1').click(function (e) {
var subitems = $(this).closest('li').data('subitems');
var shouldHideSubmenus = $(subitems).is(':visible');
if (shouldHideSubmenus) {
// in this case, hide all 'li' children items
$(subitems).slideUp();
} else {
// in this case, only show level2 items
$(subitems).find('.level2').closest('li').slideDown();
}
});
$('.level2').click(function (e) {
var subitems = $(this).closest('li').data('subitems');
var shouldHideSubmenus = $(subitems).is(':visible');
if (shouldHideSubmenus) {
// in this case, hide all 'li' children items
$(subitems).slideUp();
} else {
// in this case, only show level3 items
$(subitems).find('.level3').closest('li').slideDown();
}
});
尝试使用此http://jsfiddle.net/modaloda/B8b4z/1/
//Financial Click
$(document).ready(function () {
$('h7').click(function () {
$('h10').slideToggle();
$('h11').slideUp("fast");
$('h12').slideUp("fast");
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.