jQuery关闭侧边菜单后关闭答案

【问题标题】：jQuery close side menu once it has closedjQuery关闭侧边菜单后关闭
【发布时间】：2014-03-20 19:31:07
【问题描述】：

我认为这很容易，但在尝试了很多不同的事情之后，我被难住了！

当用户单击按钮时，我有一个滑出菜单。

会有多个滑出菜单，所以我想确保如果用户单击另一个按钮，前一个菜单将滑入并显示新菜单。我有这个工作正常。

我遇到的问题是我希望用户在再次单击按钮时能够关闭菜单。

例如用户单击按钮 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/

【问题讨论】：

标签： jquery

【解决方案1】：

试试

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

演示：Fiddle

【讨论】：

【解决方案2】：

更优雅的解决方案：

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/

【讨论】：