jQuery显示和隐藏div

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

链接：

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

的DIV在HTML：

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

来源

2011-04-21 kirkaracha

正确的方法做到这一点：

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

来源

2011-04-21 21:59:03

对不起，这不是。当我点击条款和条件并且条款和条件已经可见时，它不会隐藏它。我需要第一次点击条款和条件以显示条款和条件，第二次点击条款和条件以隐藏它。 – kirkaracha 2011-04-21 22:33:34

Gotcha - 请参阅我的编辑。 – 2011-04-21 22:39:54

很酷，谢谢！我可能会切换到这一个。 – kirkaracha 2011-04-21 22:53:32

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

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

来源

2011-04-21 21:54:52

这会切换一个div，当我点击相应的链接两次，但之后的页脚链接都不起作用。 – kirkaracha 2011-04-21 22:39:29

点击后您是否收到任何JavaScript错误？ – 2011-04-21 22:41:31

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

来源

2011-04-21 22:00:25

-1

这里是显示隐藏的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>

来源

2015-01-16 06:47:14

jQuery显示和隐藏div

回答

相关问题