折叠所点击的UL及其父母UL以外的所有UL
我有一个带有嵌套UL的导航栏，如下面所示。 我正在使用一个简单的类，并切换它，以隐藏菜单/子菜单：
nav ul ul {
display: none;
}
.showIt {
display: block;
}
在点击一个带有“＃”href的链接时，我试图隐藏所有其他的UL， 除了那些包含点击项目的UL，使用：
$("nav").on('click', "a[href='#']", function () {
var $thisUl = $(this).next('ul');
$('nav ul').not($thisUl).each(function () {
if (!($.contains($(this), $thisUl)))
$(this).removeClass('showIt');
});
$thisUl.toggleClass("showIt");
});
由于某些原因，这不起作用，因为它不会扩展点击的子菜单。 实际上，它会折叠包含此子菜单的菜单。
以下是供参考的导航结构：
<nav>
<ul class="navbar">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="newsletter.html">News/Hints & Tips</a>
</li>
<li>
<a href="#">Courses</a>
<ul>
<li>
<a href="#">IT Courses</a>
<ul>
<li><a href="courses/access-main.html">Access</a></li>
<li><a href="courses/excel-main.html">Excel</a></li>
<li><a href="courses/onenote-main.html">OneNote</a></li>
<li><a href="courses/outlook-main.html">Outlook</a></li>
</ul>
</li>
<li>
<a href="#">Microsoft Certified</a>
<ul>
<li><a href="ms-certified-courses/mos-main.html">Microsoft Office Specialist(MOS)</a></li>
<li><a href="ms-certified-courses/mosexpert-main.html">Microsoft Office Specialist(MOS) Expert</a></li>
<li><a href="ms-certified-courses/mosmaster-main.html">Microsoft Office Specialist(MOS) Master</a></li>
</ul>
</li>
<li><a href="http://external_link.co.uk" target="_blank">PD Courses</a></li>
</ul>
</li>
<li>
<a href="#">Materials</a>
<ul>
<li><a href="courseware.html">Course Materials</a></li>
<li><a href="materials/latest.html">Latest Downloads</a></li>
<li><a href="materials/access.html">Access</a></li>
<li><a href="materials/excel.html">Excel</a></li>
</ul>
</li>
<li>
<a href="testimonials.html">Testimonials</a>
</li>
<li><a href="ourteam.html">Our Team</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</nav>
我怎样才能折叠（除去类别）除当前的UL和其父母UL之外的所有UL。
contains()需要dom元素
只是改变
if (!($.contains($(this), $thisUl)))
至
if (!($(this)[0].contains($thisUl[0])))
（演示）
这里是未来观众的香草javascript解决方案。
(function () {
"use strict";
document.querySelector('nav').onclick = function (e) {
if (e.target.getAttribute('href') == '#') {
var thisUl = e.target.nextElementSibling;
var lists = document.querySelectorAll('nav ul.showIt'),
list;
for (var i = 0; list = lists[i]; i++) {
if (!list.isSameNode(thisUl) && !list.contains(thisUl)) list.className = list.className.replace(' showIt', '');
}
thisUl.className += ' showIt';
}
};
})();
（演示）
链接地址: http://www.djcxy.com/p/83677.html上一篇: Collapse all ULs other than the clicked one and its parent ULs