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

};

希望有帮助！

jQuery单击时，切换next（）元素，但关闭所有兄弟姐妹

1 个答案: