Я думал, что это будет легко, но, попробовав много разных вещей, я в тупике!
У меня есть меню выпадающего меню, которое появляется, когда пользователь нажимает кнопку.
Появятся несколько слайд-меню, поэтому я хочу убедиться, что если пользователь нажмет на другую кнопку, предыдущее меню запустится, и новый будет отображаться. У меня все работает нормально.
Проблема, с которой я столкнулась, заключается в том, что я хочу, чтобы пользователь мог закрыть меню, когда они снова нажимают кнопку.
EG Пользователь нажимает кнопку 1, и меню открывается и отображается. Пользователь снова нажимает на кнопку 1, и меню закроется.
Мне нужны обе части функциональности, и я могу только заставить работать один или другой. Любые идеи, в которых я ошибаюсь?
<body>
<div class="sidemenu button1"></div>
<div class="sidemenu button2"></div>
<a class="smbtn" data-role="button1">BUTTON 1</a>
<a class="smbtn" data-role="button2">BUTTON 2</a>
</body>
JQuery
$('.smbtn').click(function(){
$('body').removeClass('smopen');
$('.sidemenu').removeClass('open');
$('.smbtn').removeClass('active');
var datarole = $(this).attr('data-role');
if (!$(this).hasClass("active")) {
$(this).addClass('active');
$('body').addClass('smopen');
$('.sidemenu.'+datarole).addClass('open');
}
});
Вы можете увидеть скрипку здесь: http://jsfiddle.net/z5X2E/
Пытаться
$('.smbtn').click(function () {
$('.sidemenu.open').removeClass('open');
var datarole = $(this).attr('data-role');
if ($(this).hasClass("active")) {
$(this).removeClass("active");
$('body').removeClass('smopen');
} else {
$('.smbtn.active').removeClass('active');
$(this).addClass('active');
$('body').addClass('smopen');
$('.sidemenu.' + datarole).addClass('open');
}
});
Демо: скрипка
Более элегантное решение:
var $body = $('body'),
$sidemenu = $('.sidemenu');
$('.smbtn').click(function()
{
var $btn = $(this);
$sidemenu.removeClass('open');
$btn.toggleClass('active').siblings('.smbtn').removeClass('active');
if($btn.hasClass('active'))
{
$body.addClass('smopen');
$sidemenu.filter('.' + $btn.data('role')).addClass('open');
}
else $body.removeClass('smopen');
});