Question

我正在创建一个jQuery函数，以便在单击按钮时显示div。按钮类为bip_btn，div类为mi_data_inst。没有错误，但div没有显示。默认情况下，类mi_data_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>

jQuery代码

jQuery(document).on("click",".bip_btn", function(e) 
{
    if (jQuery(this).parent("div").find(".mi_data_inst").css('display') == 'none')
    {      
alert("ok--me");     
        jQuery(this).parent("div").find(".mi_data_inst").show();
    }
    else 
    {      
        jQuery(this).parent("div").find(".mi_data_inst").hide();
    }
    return false;
});

Answer 1

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

给你的HTML结构，这行jQuery：

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

找不到任何东西。该按钮不在div内，它当然不在div中，然后包含“.mi_data_inst”元素。

我个人倾向于避免.parent()，因为它只遍历一个级别，如果你的HTML结构发生了变化，那么它就会被破坏。我推荐使用.closest()，因为它会尽可能地移动以找到第一个相关的选择器。

但是，鉴于你没有在元素周围包含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 }

Answer 2

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

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>

我希望这会有所帮助

Answer 3

检查元素是否可见，你应该尝试。

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

Live Demo

首先检查是否显示无显示，使用jQuery显示隐藏的div

3 个答案: