Question

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

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

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

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

E.G。用户单击按钮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/

Answer 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

Answer 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/

一旦关闭，jQuery关闭侧边菜单

2 个答案: