У меня есть 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();
};
});
};
Может ли кто-нибудь помочь мне решить эту проблему?
Всего 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');
});
};
Надеюсь, это поможет!