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

Question

使用jQuery时，是否可以div仅在未隐藏时才隐藏a，仅在未显示时才显示它，而不是再次向其添加相同的类？

可以在那里使用 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>

我已经为这个问题剥离了一些东西。真实情况有很大不同。

编辑

切换不是我想要做的。Toggle 将改变一个类。我强制试图隐藏它，但前提是它没有隐藏。即：仅当当前类未隐藏时才添加隐藏类。

If class != 'hidden' then add the Hidden class

Answer 1

你可以这样做：

$(".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 显示值为 none。
• 它们是 type="hidden" 的表单元素。
• 它们的宽度和高度明确设置为 0。
• 或者祖先元素被隐藏，因此该元素不会显示在页面上。

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

来源：https ://api.jquery.com/hidden-selector

Answer 2

使用thisand的实例toggle

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

Answer 3

您可以使用或.toggleClass()来切换可见性。它要求您设置默认的可见性状态，并使使用的类具有相反的状态。visibilitydisplay.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>

编辑：正如其他人所提到的，使用.toggle()会做到这一点，它会改变display属性。