jquery - 通过 ID 和 CSS 属性选择元素

Question

通过 CSS，我将所有 div 设置为 visibility :hidden。通过单击导航栏中的元素，我希望将目标 div 设置为 visibility :visible。这工作得很好，但如果它已经可见，我想避免再次设置它。

此代码无效

function showNewElement(actID) {
   ID = actID.substring(1, actID.length);
   $('.mainDiv:visible').css("visibility", "hidden");
   $("#" + ID + ':hidden').css("visibility", "visible").hide().fadeIn('fast');
}

http://jsfiddle.net/dEnx5/

所以我不得不将它包装在一个 if 语句中

function showNewElement(actID) {
    var ID = actID.substring(1, actID.length);
    if ($("#" + ID).css("visibility") != "visible") {
        $('.mainDiv').css("visibility", "hidden");
        $("#" + ID).css("visibility", "visible").hide().fadeIn('fast');
    }
}

http://jsfiddle.net/qUe6k/4/

为什么反过来不行？

Answer 1

来自 jQuery - :visible Selector

Elements are considered visible if they consume space in the document.
Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout.

因此，虽然您看不到这些元素，但它们不在 :visible 集合中。

您可以改为在 mainDiv 元素上使用 display: none。那么就会认为是不可见的

.mainDiv {
    display: none;
}

然后将 jQuery 更改为

function showNewElement(actID) {
    ID = actID.substring(1, actID.length);
    $('.mainDiv:visible').hide();
    $("#" + ID + ':hidden').fadeIn();
}

参见修改后的 JSFiddle