1

我有一个在页面加载隐藏时开始的 div。当我切换“+”元素时，相对 div 切换为可见。我正在尝试使用 if - else 语句添加基于 is(":hidden") 或不基于的类。

我的 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()中的第二个参数传递

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 回答