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

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');
    }
});