单击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);
            });
        };
    });
});