javascript - jQuery 单击时，切换 next() 元素，但关闭所有同级元素

Question

我有一个功能，以便当用户单击 span.open 时，会打开带有 .footer-menu-accordion 类的下一个元素。这个切换功能效果很好。但是，如果我单击下一个 span.open (例如，我单击了 Men anchor 旁边的 span，然后单击 Women anchor 旁边的 span)，则已经打开的 .footer-menu-accordion不关闭。仅当我再次单击 span.open 时它才会关闭。

我希望每次单击 span.open 时，紧随其后的 .footer-menu-accordion 都会打开，但如果有任何其他 .footer-menu-accordion div 打开，这些将关闭。我想我需要以 sibling 为目标，但我不知道如何做。这是我的 html:

    <div class="dropdown-container">
          <a class="level-1 direct">Men</a><span class="open"></span> 
    </div>

    <div class="footer-menu-accordion">
       <a class="level-2"></a>
    </div>

    <div class="dropdown-container">
          <a class="level-1 direct">Women</a><span class="open"></span> 
    </div>

    <div class="footer-menu-accordion">
       <a class="level-2"></a>
    </div>

这是我的 jQuery:

function mobileMainNav(){
    $('a.level-1.direct').click(function(){
        window.location = $(this).attr('href');
    }); 


    $('span.open').click(function(){
        $(this).toggleClass('arrow');
        $(this).parent().next('.footer-menu-accordion').slideToggle();
        if ($(this).siblings(':visible')) {
            $(this).siblings.hide();
        };
    }); 

};

谁能帮我解决这个问题吗？

Answer 1

如果我正确理解你的问题，那么应该可以通过更新你的 jQuery 脚本来实现你所需要的，如下所示:

function mobileMainNav(){
    $('a.level-1.direct').click(function(){
        window.location = $(this).attr('href');
    }); 


    $('span.open').click(function(){
        $(this).toggleClass('arrow');

        // Toggle accordion menu related to this span
        $(this).parent().next('.footer-menu-accordion').slideToggle();

        // Hide other accordion menus that are not related to this span, 
        // via slideUp()
        $('span.open')
        .not(this)
        .parent()
        .next('.footer-menu-accordion')
        .slideUp(); 

        // Remove the arrow class on other menus
        $('span.open')
        .not(this)
        .removeClass('arrow');
    }); 

};

希望有帮助!