1

我正在制作一个 jQuery 函数以在单击按钮时显示一个 div。按钮类是 bip_btndiv 类是mi_data_inst. 没有错误，但 div 不显示。默认情况下，该类的 divmi_data_inst具有 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;
});
4

3 回答 3

3

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

给你的 HTML 结构，这行 jQuery：

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

没有找到任何东西。该按钮不在 div 内，当然也不在包含“.mi_data_inst”元素的 div 内。

我个人倾向于避免使用 .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
}
于 2013-10-26T18:30:59.863 回答
0

to check if a element is visible you should try like.

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

in your case

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

于 2013-10-26T18:35:22.673 回答
0

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

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>

我希望这有帮助

于 2013-10-26T18:20:22.547 回答