在第一次检查是否为DisplayNone之后，使用jQuery显示隐藏的div

我正在制作一个jQuery函数，在单击按钮时显示一个div。按钮类为

bip\u btn

，div类为

mi\u data\u inst

。没有错误，但div不显示。默认情况下，类为

mi\u data\u inst

的div具有css属性

display:none

HTML结构：

<div class="col-md-6 col-sm-6 wpb_column column_container">
    <div class="wpb_wrapper">
        <div class="wpb_text_column wpb_content_element ">
            <div class="wpb_wrapper">
            <p></p>
        </div>
        <p></p>
    </div>
    <p>
        <button class="wpb_button  wpb_wpb_button wpb_regularsize bip_btn">Take Private Lessons</button>
    </p>
    <div class="wpb_text_column wpb_content_element  mi_data_inst">
        <div class="wpb_wrapper">
            <p>Demo title</p>
            <p>
            <p>demo content</p>
            <p></p>
        </div>
        <p></p>
    </div>
    <p></p></div></div>

---

可以执行以下操作来检查图元是否可见：

if ( $(selector).is(":visible") )
   // the element in $(selector) is visible

根据您的需要，您可以通过以下方式完成：

<script>
jQuery(document).on("click",".bip_btn", function(e) 
{
    if ( jQuery(".mi_data_inst").is(":visible") )
    {      
        jQuery(".mi_data_inst").hide();
    }
    else 
    {      
         jQuery(".mi_data_inst").show();
    }
    return false;
});
</script>

jQuery（document）.on（“click”，“.bip_btn”，函数（e）
{
如果（jQuery（“.mi_data_inst”）是（“：visible”））
{      
jQuery（“.mi_data_inst”）.hide（）；
}
其他的
{      
jQuery（“.mi_data_inst”）.show（）；
}
返回false；
});

---

我希望这有帮助

问题不在于检测它是否可见，而在于你的选择器

给出您的HTML结构，这行jQuery：

if ( jQuery(this).parent("div")

他什么也没找到。按钮不在div中，当然也不在包含“.mi_data_inst”元素的div中

我个人倾向于避免，因为它只遍历一个级别，如果您的HTML结构发生任何更改，这将被破坏。我建议您这样做，因为它将尽可能远地找到第一个相关的选择器

但是，考虑到元素周围没有div，而且这似乎是唯一的，我建议完全更改选择器，如下所示：

jQuery(document).on("click",".bip_btn", function(e) {
    // Utilize closest
    // Put into a variable, since you're using it more than once
    var parent = jQuery(this).closest(".wpb_column");
    if (parent.find(".mi_data_inst").css('display') == 'none') {      
        alert("ok--me");     
        // Utilize closest
        parent.find(".mi_data_inst").show();
    } else {      
        // Remove the .parent and .find()
        parent.(".mi_data_inst").hide();
    }
    return false;
});

注意：
您的问题特别要求检查所讨论的div是否设置为

display:none

，因此我将上面的结构保留下来。但是，如果您只想检查div是否可见，此处的其他答案是否正确，您可以/应该检查：

if ( ! jQuery(this).closest(".wpb_column").find('.mi_data_inst').is(':visible')) {
    // Show it
} else {
    // Hide it
}

---

要检查某个元素是否可见，应尝试以下操作：

$(element).is(":visible")

就你而言

$(document).on("click",".bip_btn", function(e) {
    if (!($(".mi_data_inst").is(":visible"))) {      
        alert("hidden");     
        $(".mi_data_inst").show();
    } else {      
        $(".mi_data_inst").hide();
    }
    return false;
});

---

@r3mus-不是复制品，因为问题不在于检测它是否隐藏，问题在于他的选择器不工作。这并不能解决他的问题。这是一种不错的技术，但他的问题与DOM遍历有关。我使用了find和next，因为有四个按钮，像这样，有四个div，属于同一个类。所以我想要这样的东西，当我点击一个按钮时，按钮附近最近的类

mi_data\u inst

show@user1001176-首先，您需要编辑问题以显示您所说的正在包装它的

div

。其次，包装它们的div可能需要有一个类，然后您可能需要使用

.nestest（'div.myclass'）

。我尝试使用'if（jQuery（this）.nestest（'div.mi_data_inst'）.css（'display'）='none'）`但它似乎仍然没有working@user1001176-那么，这是我第二次建议你编辑这个问题，把你说的要包装的div包括进去。如果没有更多的上下文，就不可能告诉你什么不起作用。此外，

.nexist

与

.parent

类似，因此您肯定不会找到带有.nexist的“div.mi\u data\u inst”。也许你想试试

.sibbins（）

。很抱歉，我没有提到，但是包装按钮的主div和单击按钮时要显示的div是

wpb\u包装器

，它已经在问题中了

$(document).on("click",".bip_btn", function(e) {
    if (!($(".mi_data_inst").is(":visible"))) {      
        alert("hidden");     
        $(".mi_data_inst").show();
    } else {      
        $(".mi_data_inst").hide();
    }
    return false;
});