Закройте вспомогательную навигацию после открытия другой вспомогательной навигации с помощью jQuery

Question

В настоящее время у меня это работает почти идеально, но у пользователя есть возможность открыть сразу несколько вспомогательных навигаторов, и мне нужно, чтобы любые открытые вспомогательные навигаторы закрывались, когда открывается другой.

В основном, jQuery это beloe, мне нужно, чтобы классы удалялись, если нажимается новая под-навигация, в настоящее время он удаляет их только при нажатии того же самого.

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"); 
});

Answer 1

Можно сделать с помощью removeClass

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

И вы можете еще больше очистить свой код, используя селектор siblings :

$(".toggle-arrow").click(function(){
    $(".reg-subnav").not($(this).siblings(".reg-subnav")).removeClass("open-sub");
    $(this).siblings(".reg-subnav").toggleClass('open-sub');
    $(this).siblings('.arrow-image').toggleClass("flip"); 
});

РЕДАКТИРОВАТЬ: Per @epascarello, Это также можно было бы сделать более производительным, сохранив subnav, чтобы он не запрашивался дважды:

$(".toggle-arrow").click(function(){
    var $thisSubnav = $(this).siblings(".reg-subnav");
    $(".reg-subnav").not($thisSubnav).removeClass("open-sub");
    $thisSubnav.toggleClass('open-sub');
    $(this).siblings('.arrow-image').toggleClass("flip"); 
});

Answer 2

Вы можете использовать братьев и сестер, выбирать элементы с классом и удалять их.

$("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>

Answer 3

Как насчет этого? Вам следует удалить класс open-sub из всех списков.

$(".toggle-arrow").click(function(){
    $("nav.st-menu").find(".reg-subnav").removeClass('open-sub');
    $(this).closest('li').find(".reg-subnav").toggleClass('open-sub');

    $("nav.st-menu").find(".arrow-image").removeClass('flip');
    $(this).closest('li').find('.arrow-image').toggleClass("flip"); 
});