jQuery仅在可见时隐藏，仅在隐藏时显示

使用jQuery时，是否可以仅在未隐藏时隐藏

div

，并仅在未显示时显示，而不是再次向其添加相同的类

像if这样的东西能用在那里吗

例如：

$(document).ready(function() {
 $(".trigger").click(function() {
    // Hide it but only if not hidden - hide
    // Later in the script - Show it but only If it's not visible. 
 });
});

<div class="user">Example Div</div> 
<div class="trigger">Load</div>

---

使用

此

和

切换的实例

$(".user").click(function() {
    // Only if not hidden - hide
    // Later in the script - Only If not visible show. 
    $(this).next(".trigger").toggle();
});

---

您可以使用

.toggleClass（）

切换可见性，可以使用

可见性

或

显示

。它要求您设置默认的可见性状态，并使

中使用的类具有相反的状态

.user {
    display: block;
}

.visibility {
    display: none;
}

$(document).ready(function() {
    $(".user").click(function() {
        $(this).toggleClass('visibility');

    });
});

<div class="user">Example Div</div> 
<div class="trigger">Load</div>

.user{
显示：块；
}
.能见度{
显示：无；
}
$（文档）.ready（函数（）{
$（“.user”）。单击（函数（）{
$（this.toggleClass（'visibility'）；
});
});
示例Div
负载

编辑：如其他人所述，使用
.toggle（）
将完成此操作，它将更改
显示属性。
您可以执行以下操作：

$(".user").click(function () {
    // Hide it but only if not hidden - hide
    $('.trigger:visible').hide();

    // Later in the script - Show it but only If it's not visible.  
    $('.trigger:hidden').show();
});

对于更多的上下文，如果：


它们的CSS显示值为“无”
它们是type=“hidden”的表单元素
它们的宽度和高度显式设置为0
或者隐藏了一个祖先元素，因此该元素不会显示在页面上

此外，“具有可见性：隐藏或不透明度：0的元素被视为可见。”

来源：
.toggle（）
就可以了。
.toggle（）
是你想要的，而不是我想要的。查看我的编辑。当您可以简单地
toggle（）
或选中
is（“：visible”）
时，这难道不是太过分了吗？问题是一旦用户被隐藏，它就不会再次显示（因为无法单击带有display:none的div）。显然，这更多的是一个思考目标的问题，而不是一个答案的问题，但是OP应该考虑这个问题。很棒的观点@jameslafferty！OP，使用
visibility:hidden
和
visibility:visibility
将允许元素仍然被单击，但它仍然会占用DOM中的空间。我在这里搜索一个解决方案，以显示是否隐藏或显示是否隐藏，而不必编写决策流。通过单击按钮，您1）可以看到内容，再次单击将2）将其隐藏。单线解决方案。非常感谢。感谢您理解我的要求。我还没有实际测试过它，所以我可能是错的，但是这段代码不会隐藏元素，然后再次尝试显示它，因为它已经被隐藏了吗？
$(".user").click(function () {
    // Hide it but only if not hidden - hide
    $('.trigger:visible').hide();

    // Later in the script - Show it but only If it's not visible.  
    $('.trigger:hidden').show();
});