Question

我正在使用jQuery执行这个非常简单的任务，这段代码可以工作，但感觉很臃肿，我确信这样做的速度更快：

菜单和关闭默认隐藏。

$(document).ready(function(){
var menu = $('#menu');
var open = $('.btnOpen');
var close = $('.btnClose');

open.click(function(){
    menu.show();
    open.hide();
    close.show();
});

close.click(function(){
    menu.hide();
    close.hide();
    open.show();
});

}）;

Answer 1

尝试：

$(document).ready(function(){
    $('.btnOpen, .btnClose').click(function(){
        $('#menu, .btnOpen, .btnClose').toggle();
    });
});

Answer 2

$('.btnOpen, .btnClose').click(function(){
    $('.btnOpen, .btnClose, #menu').toggle();
});

务必通过CSS正确设置初始状态。

Answer 3

您可以对元素进行分组：

open.click(function(){
    menu.add(close).show();
    open.hide();
});

close.click(function(){
    menu.add(this).hide();
    open.show();
});

或者也可能（更短但仍然可靠）：

open.add(close).click(function(){
    var show = $(this).hasClass('btnOpen');
    menu.add(close).toggle(show);
    open.toggle(!show);
});

您甚至可以预先存储对menu.add(close)的引用。

我会避免使用toggle，以免失去同步。只有当您非常确定通过这些按钮可以通过其他任何方式改变可见性时。如果快速/重复点击不会搞砸了。

Answer 4

让我们在这里提出更多想法...... :)

$(document).ready(function(){
    var $buttons = $('.btnOpen,.btnClose');

    $buttons.click(function(){
        $buttons.add('#menu').toggle();
    });
});

重构这个jQuery（看起来很臃肿）

4 个答案: