jQuery單擊時，切換next（）元素，但關閉所有同級

Question

我有一個functoin，以便當用戶單擊span.open時，將打開具有.footer-menu-accordion類的下一個元素。 此切換功能工作正常。 但是，如果我單擊下一個span.open（例如，我單擊了Men錨旁邊的跨度，然后單擊Women錨旁邊的跨度），則已經打開的.footer-menu-accordion不關閉。 僅當我再次單擊span.open時，它才會關閉。

我希望這樣，每次我單擊span.open時，緊隨其后的.footer-menu-accordion都會打開，但是如果還有其他.footer-menu-accordion div打開，則它們會關閉。 我認為我需要針對兄弟姐妹，但我不確定如何。 這是我的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');
    }); 

};

希望有幫助！