html - 用jQuery打开其他子导航后，关闭子导航

目前，我的工作几乎完美，但是用户可以一次打开多个子导航，并且当另一个打开时，我需要任何打开的子导航才能关闭。

基本上，这是beloe的jQuery，如果单击新的子导航，则需要删除类，当前仅在单击相同的子导航时才将其删除。

的HTML

<nav class="st-menu" id="menu-4a">
    <ul>
        <li>
            <a href="#">Guidance Manual</a>
        </li>
        <li>
            <a href="#">Resource Directory</a><div class="toggle-arrow"><img src="/assets/images/chevron-up-solid.svg"/></div>
            <ul class="reg-subnav">
                <li><a href="#">Stormwater Plan Review Resources</a></li>
                <li><a href="#">Pilot Projects</a></li>
                <li><a href="#">Proprietary Products</a></li>
                <li><a href="#">Additional Resources</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Stormwater 101</a><div class="toggle-arrow"><img src="/assets/images/chevron-up-solid.svg"/></div>
            <ul class="reg-subnav">
                <li><a href="#">Regulations</a></li>
                <li><a href="#">Stormwater Management</a></li>
                <li><a href="#">Stormwater Billing & Retrofits</a></li>
                <li><a href="#">Green City, Clean Waters</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Contact Us</a><div class="toggle-arrow"><img src="/assets/images/chevron-up-solid.svg"/></div>
            <ul class="reg-subnav">
                <li><a href="#">About Us</a></li>
                <li><a href="#">Development Review Contacts</a></li>
            </ul>
        </li>
    </ul>
</nav>

jQuery的

$(".toggle-arrow").click(function(){
    $(this).closest('li').find(".reg-subnav").toggleClass('open-sub');
    $(this).closest('li').find('.arrow-image').toggleClass("flip");
});

最佳答案

您可以使用同级，并在类中选择元素并删除它们。

$("nav").on("click", ".toggle-arrow", function(){
    var currentLi = $(this).closest('li')
    currentLi.find(".reg-subnav").toggleClass('open-sub');
    currentLi.find('.toggle-arrow').toggleClass("flip");

    //clean up the other open elements
    var otherLis = currentLi.siblings()
    otherLis.find(".open-sub").removeClass('open-sub')
    otherLis.find(".flip").removeClass('flip')

});

.reg-subnav {
  display: none;
}

.reg-subnav.open-sub {
  display: block;
}

img {
 width: 20px;
}

.toggle-arrow {
  position: relative;
  cursor: pointer;
  display: inline-block;
}

.toggle-arrow img {
  transform: rotateX(180deg);
  transition: transform 0.75s;
  transform-style: preserve-3d;
}

.toggle-arrow.flip img {
  transform: rotateY(0deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="st-menu" id="menu-4a">
    <ul>
        <li>
            <a href="#">Guidance Manual</a>
        </li>
        <li>
            <a href="#">Resource Directory</a><div class="toggle-arrow"><img src="https://image.flaticon.com/icons/svg/120/120906.svg"/></div>
            <ul class="reg-subnav">
                <li><a href="#">Stormwater Plan Review Resources</a></li>
                <li><a href="#">Pilot Projects</a></li>
                <li><a href="#">Proprietary Products</a></li>
                <li><a href="#">Additional Resources</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Stormwater 101</a><div class="toggle-arrow"><img src="https://image.flaticon.com/icons/svg/120/120906.svg"/></div>
            <ul class="reg-subnav">
                <li><a href="#">Regulations</a></li>
                <li><a href="#">Stormwater Management</a></li>
                <li><a href="#">Stormwater Billing & Retrofits</a></li>
                <li><a href="#">Green City, Clean Waters</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Contact Us</a><div class="toggle-arrow"><img src="https://image.flaticon.com/icons/svg/120/120906.svg"/></div>
            <ul class="reg-subnav">
                <li><a href="#">About Us</a></li>
                <li><a href="#">Development Review Contacts</a></li>
            </ul>
        </li>
    </ul>
</nav>

关于html - 用jQuery打开其他子导航后，关闭子导航，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/62071148/