Question

我有一个带有嵌套UL的导航栏，如下所示。我使用一个简单的类并切换它来隐藏菜单/子菜单：

nav ul ul {
    display: none;
}
.showIt {
    display: block;
}

单击＆＃34;＃＆＃34;的href链接我试图隐藏所有其他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 &amp; 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。

Answer 1

contains()需要dom元素

只需更改

if (!($.contains($(this), $thisUl)))

到

if (!($(this)[0].contains($thisUl[0])))

（Demo）

这是未来观众的香草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';
        }
    };
})();

（Demo）

折叠除已点击的UL及其父UL之外的所有UL

1 个答案: