jquery - 单击 JQuery 打开/关闭

Question

在下面的例子中，当点击 ID 'Home' 时，会出现 div.panel，然后如果再次点击 ID 'Home'，则会隐藏 div.panel。目前我有这个：

$(document).ready(function() {
$('#home').on('click', function() {
    $('div.panel').animate({
        'width': 'show'
    }, 1000, function() {
        $('div.home').fadeIn(500);
    });
});

$('#home').on('click', function() {
    $('div.home').fadeOut(500, function() {
        $('div.panel').animate({
            'width': 'hide'
        }, 1000);
    });
});
});

Answer 1

通过按原样复制事件处理程序，无论何时#home单击，这两个函数都将尝试同时运行。您需要使用条件来决定是否运行其中一个。

$(document).ready(function () {
    $('#home').on('click', function () {
        if ($('div.home').is(':visible')) {
            $('div.home').fadeOut(500, function () {
                $('div.panel').animate({
                    'width': 'hide'
                }, 1000);
            });
        } else {
            $('div.panel').animate({
                'width': 'show'
            }, 1000, function () {
                $('div.home').fadeIn(500);
            });
        };
    });
});

Answer 2

您的代码在某一点是多余的（ 的双重定义$('#home').on('click', function()...），您只需要其中一个。要实现您的描述，jqueries 的“切换”是您的朋友。可以这样做：

$('#home').on('click', function() {
    $('div.panel').animate({
        'width': 'toggle'
    }, 1000); });

有关工作示例，请参阅此Fiddle 。