Question

当您点击包含id="viewers"的链接以查看其内容，然后在看到该内容后，当您点击包含id="voters"的链接时，id="viewers"将隐藏然后显示{ {1}}的内容。我怎样才能做到这一点？我已经为自己尝试但是我没有到目前为止：/这是我的代码：

id="voters"

HTML

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

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

提前致谢。

Answer 1

为什么要检查两次相同的情况？只需将'if-if'代码转换为'if-else'代码，因为visible和hidden是相反的条件。像这样：

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

Answer 2

如果没有你的html很难说，但是你可以简化并做一些类似的东西，它也更具可扩展性。

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

Answer 3

将其中一个元素设置为隐藏，并将另一个元素设置为可见。

<input id='view_voters' value='Toggle Viewers/Voters' type='button' />

<div style='display: none;' id='viewers'>
    These are my viewers
</div>
<div id='voters'>
    These are my voters
</div>

然后在点击时切换两个元素。

$('#view_voters').click(function() {
    $('#viewers').toggle();
    $('#voters').toggle();

});

这里有完整的例子：

http://jsfiddle.net/7akvT/2/

在查看下一个内容之前隐藏可见内容

3 个答案: