Question

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

可以在那里使用吗？

例如

$(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>

我已经解决了这个问题。真实的东西有很多不同。

修改

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

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();
});

对于更多上下文，如果符合以下条件，则视为“：hidden”：

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

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

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

Answer 2

使用this和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()来切换visibility或display的可见性。它要求您设置默认的可见性状态，并使.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属性。

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

3 个答案: