jQuery Show＆Hide Toggle

Question

我有一些需要隐藏的div（类名为.hideable），还有一些需要显示的div（类名为.toggleable。我到目前为止工作，这很好，但是我对以下内容有困难） ;隐藏的div（.hideable）需要在可切换的div再次隐藏后返回。

这就是我所拥有的：

jQuery(document).ready(function($) {
    var topContainer = $(".toggleable");
    var topButton = $(".orsp a");
    topButton.click(function() {
        topContainer.slideToggle('slow');
        $(".hideable").hide();
    });
});

欢迎大家帮忙！ 谢谢，J。

Answer 1

使用jQuery.toggle（）

$(".hideable").toggle();

而不是jQuery.hide()

Answer 2

我想你wnat尝试喜欢this

HTML

<div style='display:none' class='hideable' >Hidden Div</div>
<div class='toggleable'>Toggleable div</div>

<input class='topButton' type='button' value='toggle'>

JS

$('.topButton').click(function() {
    $('.toggleable').slideToggle('slow', function() { $(".hideable").slideToggle(); });
});

在这里小提琴

Answer 3

如果您不想使用切换来隐藏.hideable div，您可以使用CSS隐藏它，每当您切换.toggleable div时，您可以使用Jquery检查它是否隐藏，如果是，您可以将其更改为显示。 然而，Jakub的答案是最简单的解决方案。

Answer 4

最简单的选择切换或切换类

小提琴

<http://jsfiddle.net/gcsHg/>?

Answer 5

jQuery(document).ready(function($) {
var topContainer = $(".toggleable");
var topButton = $(".orsp a");
topButton.toggle(function() {
    topContainer.slideToggle('slow');
    $(".hideable").hide();
},function () {
topContainer.slideToggle('slow');
    $(".toggleable").hide();
 });
});