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

Question

我有一个函数，当用户点击 span.open 时，下一个类为 .footer-menu-accordion 的元素就会打开。此切换功能工作正常。但是，如果我单击下一个 span.open(例如，我单击了 Men anchor 旁边的跨度，然后单击了 Women anchor 旁边的跨度)，那么已经打开的 .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');
    }); 

};

希望对您有所帮助!