在查看下一个内容之前，先隐藏可见的内容 [英] Hide the visible content before view the next content

问题描述

当您单击带有id="viewers"的链接以查看其内容时，然后在它可见后，当您单击带有id="voters"的链接时，id="viewers"将隐藏并显示id="voters"的内容.我怎样才能做到这一点?我已经为自己尝试过，但是到目前为止还没有到:/这是我的代码:

When you click on the link with id="viewers" to view it's content and then, after it's visible, when you click on the link with id="voters", id="viewers" will hide and then show id="voters"'s content. How can I do that? I've tried for myself but I didn't come so far :/ Here is my code:

$('#view_voters').click(function() {
    if($('#viewers').is(':visible')) {
        $('#viewers').slideUp('slow');
    }

    if($('#viewers').is(':hidden')) {
        $('#voters').slideToggle('slow');
    }
});

HTML

echo '<div class="paddingbottom-10" id="voters" style="display: none;">';
    echo '<table width="100%" cellpadding="0" cellspacing="0" class="blog-viewers">';
        # content
    echo '</table>';
echo '</div>';

谢谢.

推荐答案

没有您的html很难说，但是您可以简化并做类似的事情，而且也可以扩展.

Without your html is hard to tell but you can simplify and do something like this which is also more extensible.

var $panels = $('.panel'); // All your sections with class `.panel`

var panelSlide = function ($this) {
    $panels.find(':visible').slideUp('fast', function () {
        $this.slideDown();
    });
};
$('#voters, #viewers').click(function () {
    panelSlide($(this).find('.panel'));
});

这篇关于在查看下一个内容之前，先隐藏可见的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！