jQuery 显示和隐藏 div答案

【问题标题】：jQuery to show and hide divsjQuery 显示和隐藏 div
【发布时间】：2011-04-21 21:52:16
【问题描述】：

当我单击页脚中的链接时，我正在尝试使用 jQuery 显示和隐藏两个覆盖 DIV（请参阅下面的标记）。如果我单击了其中一个链接，则 jQuery 的行为与预期一样：它隐藏了另一个叠加层并显示了与我单击的链接匹配的 DIV。如果我单击条款和条件，然后再次单击条款和条件，它会隐藏 DIV，然后再次显示相同的 DIV。如果 DIV 已经可见，我想隐藏它。（我最初尝试了 .toggle 并且行为是相同的。）

页脚中的链接：

<a href="#terms">Terms and Conditions</a>
<a href="#privacy">Privacy Policy</a>

HTML 中的 DIV：

<div class="meta" id="terms">Terms and Conditions</div>
<div class="meta" id="privacy">Privacy Policy</div>

jQuery:

$('footer a').click(function(e){
    $('.meta').hide();
    var div_to_show = $(this).attr('href');
    if($(div_to_show).is(':visible')) {
        // hide corresponding div if it's visible
        $(div_to_show).hide('fast');
    } else {
        // show corresponding div if it's not visible
        $(div_to_show).show('fast');
    }
    e.preventDefault();
});

这行得通：

if($(this.hash).is(':visible')) {
    $('.meta').hide('fast');
} else {
    $('.meta').hide('fast');
    $(this.hash).show('fast');
}
e.preventDefault();

【问题讨论】：

标签： jquery html hide hyperlink show

【解决方案1】：

在检查点击链接的关联 div 是否为 :visible 之前，您隐藏了两个 div。

【讨论】：

【解决方案2】：

正确的做法：

var $meta = $('.meta');
$('footer a').click(function(e){
    var $div = $($(this).attr('href'));
    $meta.not($div).hide();
    $div.toggle('fast');
    return false;
});

使用.toggle()
适当时缓存 jQuery 选择器

Demo

【讨论】：

抱歉，这还不是。当我单击条款和条件并且条款和条件已经可见时，它不会隐藏它。我需要第一次点击条款和条件来显示条款和条件，然后第二次点击条款和条件来隐藏它。

【解决方案3】：

你为什么不设置一个可见的标志？

var isVisible = false;
$('footer a').click(function(e){
    $('.meta').hide();
    var div_to_show = $(this).attr('href');
    if(isVisible) {
        // hide corresponding div if it's visible
        $(div_to_show).hide('fast');
    } else {
        isVisible = true;
        $(div_to_show).show('fast');
    }
    e.preventDefault();
});

【讨论】：

当我点击相应的链接两次时，这会切换一个 div，但此后两个页脚链接都不起作用。

【解决方案4】：

这是显示隐藏 div 的代码...

JsFiddle

$(document).ready(function () {
    $("#message_div").hide();
    //attach click event to buttons
    $('.button-show').click(function () {

        /**
         * when show button is clicked we call the show plugin
         * which scales the box to default size
         * You can try other effects from here: http://jqueryui.com/effect/
         */
        $("#message_div").show();

    });

    $('.button-hide').click(function () {

        //same thing happens except in this case we hide the element
        $("#message_div").hide();

    });
});

在模板/html文件中。

<div id="message_div" style="width:80%; margin:0 auto; color:black;">
    <h1> This is Div One </h1>
    <p>  Your Content</p>
 <br />
<input type="button" value="Discard" class="button-hide" />
 <br />
</div>
<div style="width:80%; margin:0 auto; color:black; margin-top:25px">
<input type="button" value="Send Message" class="button-show"  />   
</div>
<div style="width:80%; margin:0 auto; margin-top:25px">
    <h1>This is Div Two</h1>
<p>Your Content</p>
</div>

【讨论】：