javascript - 当我第二次点击链接时如何显示面板

Question

当点击左侧链接时，下面对我来说很好，右侧面板动画像slideUp。但是当我再次点击同一个链接时，面板隐藏了。但我不想隐藏面板。请让我知道，我需要在上面的代码中更正什么。

$(function() {
    $('div.panel').hide();
    $('div.panel:first').addClass('active').show();
    $('li.link').click(function() {
        var id = $(this).attr('rel');
        var showing = $(id).is(':visible');
        $('div.panel').slideUp('slow');
        $('li.link').removeClass('active');
        if (!showing) {
            $(id).slideDown('fast', function() {
                $('html,body').animate({
                    scrollTop: 0
                }, 'slow')
            });
            $(this).addClass('active');
        }
    });
});

Answer 1

将.slideUp调用移到if块内。如果您单击了与当前页面对应的链接以外的任何链接，您只想做一些事情。

$('li.link').click(function() {
    var id = $(this).attr('rel');
    var showing = $(id).is(':visible');
    $('li.link').removeClass('active');
    $(this).addClass('active');
    if (!showing) {
        $('div.panel').slideUp('slow');
        $(id).slideDown('fast', function() {
            $('html,body').animate({
                scrollTop: 0
            }, 'slow')
        });
        $(this).addClass('active');
    }
});