jQuery закрыть боковое меню после его закрытия

0

Я думал, что это будет легко, но, попробовав много разных вещей, я в тупике!

У меня есть меню выпадающего меню, которое появляется, когда пользователь нажимает кнопку.

Появятся несколько слайд-меню, поэтому я хочу убедиться, что если пользователь нажмет на другую кнопку, предыдущее меню запустится, и новый будет отображаться. У меня все работает нормально.

Проблема, с которой я столкнулась, заключается в том, что я хочу, чтобы пользователь мог закрыть меню, когда они снова нажимают кнопку.

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/

Теги:

2 ответа

3
Лучший ответ

Пытаться

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

Демо: скрипка

  • 0
    Большое вам спасибо - работает удовольствие! :)
1

Более элегантное решение:

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

Демо: http://jsfiddle.net/z5X2E/1/

Ещё вопросы

Сообщество Overcoder
Наверх
Меню