jQuery При щелчке, переключите следующий () элемент, но закройте всех братьев и сестер

У меня есть functoin, поэтому, когда пользователь нажимает на span.open, открывается следующий элемент с классом .footer-menu-accordion. Эта функция переключения отлично работает. Однако, если я нажму на следующий span.open (например, я нажал на промежуток рядом с анкером Men, а затем на пролет рядом с якорем «Женщины»), затем уже появилось фрейм-меню-аккордеон, который уже открыт не закрывается. Он только закрывается, если я снова нажимаю на span.open.

Мне бы хотелось, чтобы каждый раз, когда я нажимаю на span.open, сразу открывается его .footer-menu-accordion, после чего открывается, но если есть какие-либо другие .footer-menu-divion divs open, те закрываются. Я думаю, мне нужно ориентироваться на братьев и сестер, но я не знаю, как это сделать. Вот мой 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();
        };
    }); 

};

Может ли кто-нибудь помочь мне решить эту проблему?

javascript jquery html css

Всего 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');
    }); 

};

Надеюсь, это поможет!