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-Statement

中

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

如果元素占用文档中的空间，则认为元素是可见的具有可见性的元素：隐藏或不透明度：0被认为是可见的，因为它们仍占用布局中的空间。

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

您可以做的是在display: none元素上使用mainDiv。然后它将被视为隐形

.mainDiv {
    display: none;
}

然后将jQuery更改为

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

请参见修改后的JSFiddle

Answer 2

写：

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

Fiddle here.

Answer 3

如果你改变它是有效的：

$("#" + ID + ':hidden').css("visibility", "visible").hide().fadeIn('fast');

要：

$("#" + ID).css("visibility", "visible").hide().fadeIn('fast');

按ID和CSS属性选择元素

3 个答案: