1

ページの読み込み時に開始するdivが非表示になっています。「+」要素を切り替えると、相対divが表示に切り替わります。is（ "：hidden"）に基づいてクラスを追加しようとしていますが、if-elseステートメントを使用していません。

私のHTMLは次のとおりです。

<div class="views-row">
<div class="field-group-format-toggler-abstract">+</div>
<h2>Title 1</h2>
<div class="field-group-format-wrapper" style="display:none;">
Dolor minim neque pala ratis sit. Ideo odio praesent. Aliquam capto gravis quis. Antehabeo diam huic praemitto. Immitto pneum ratis vereor volutpat. Brevitas facilisis illum macto mos plaga ratis utrum. Jumentum rusticus secundum
</div>
</div>

私のJQueryは次のとおりです。

$(".field-group-format-toggler-abstract").click(function() {
$(this).nextAll(".field-group-format-wrapper").toggle();
               });

if($(".field-group-format-wrapper").is(":hidden"))
// this seems to work, 'closed' gets added
$('.field-group-format-toggler-abstract').addClass("closed");

// but this part does not seem to work     
     else
$('.field-group-format-toggler-abstract').addClass("open").removeClass("closed");

この最初の部分は機能しますが、追加および削除クラスは機能しません。私はこれを行うためにさまざまな方法を試しましたが、何も機能していないようです。クラスはそのままclosedです。

これがフィドルです

4

2 に答える 2

3

これを試して、

$(".field-group-format-toggler-abstract").click(function() {
    var $div = $(this).nextAll(".field-group-format-wrapper");  // <-- cache the selector
    $div.toggle();       
    $(this).toggleClass('open', $div.is(':visible')); // <-- if wrapper div is visible class open will be added // else it will be removed
    $(this).toggleClass('closed', $div.is(':hidden')); // <-- if wrapper div is hidden class open will be added // else it will be removed
});​

.toggleClass（）の2番目の引数として条件/スイッチを渡すことができます

http://jsfiddle.net/LHguJ/25/

于 2012-08-06T18:53:24.883 に答える
1

これを試して、

if($(".field-group-format-wrapper").is(":visible")){
  $('.field-group-format-toggler-abstract').addClass("close").removeClass("open");
}
else {
    $('.field-group-format-toggler-abstract').addClass("open").removeClass("closed");
}
于 2012-08-06T18:14:28.603 に答える