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的“toggle”是你的朋友。可以这样做：

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

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

单击JQuery打开/关闭

2 个答案: