jQuery显示/隐藏嵌套的div [英] jQuery Show/Hide nested divs

问题描述

我有无法解决的尴尬问题.

I have awkward problem I cannot resolve.

我有一个嵌套的div，我想在用户单击链接时显示/隐藏.所有div一次.

I have a nested divs, which I want to show / hide when user clicks on a link. All divs at once.

我无法将ID分配给我的div，因此我将需要使用类进行设置.

I cannot assign ID's to my divs, so I will need to do it wiht classes.

<a href="#" id="showhide">Show more</a>

<div class="more">
<div class="more1">
<h2>Some title</h2>
<p>Some text</p>
</div>

<div class="more2">
<h2>Some title</h2>
<p>Some text</p>
</div>

<div class="more3">    
<h2>Some title</h2> 
<p>Some text</p>
</div>

</div>​

这是我的html结构的小提琴. http://jsfiddle.net/56jdL/1/

Here is the fiddle to my html structure. http://jsfiddle.net/56jdL/1/

谢谢！

推荐答案

您可以使用css首先隐藏div:

You can use first hide the div, using css:

.more { display: none }

或jQuery:

$('.more').hide() 

然后使用toggle方法:

$(function() {
   // $('.more').hide() 
   $('#showhide').click(function(e){
      e.preventDefault();
      $('.more').toggle()
   })
})

http://jsfiddle.net/J2YgE/

这篇关于jQuery显示/隐藏嵌套的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！