javascript - jQuery の表示と非表示の切り替え

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

私はあなたが好きだと思います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();
 });
});