JQuery 测试元素是可见的还是隐藏的，然后添加删除类

JQuery testing if an element is visible or hidden and then add remove classes

本文关键字：然后 添加 删除 隐藏 测试 JQuery 元素      更新时间：2023-09-26

我隐藏了一个在页面加载时开始的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.

这是一个小提琴

试试这个， 

$(".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/

试试这个，

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");
}
相关文章：