jquery - jQuery 显示/隐藏嵌套的 div

Question

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

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

我不能为我的 div 分配 ID，所以我需要用类来做。

<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/

谢谢！

Answer 1

您可以使用首先隐藏 div，使用css：

.more { display: none }

或 jQuery：

$('.more').hide() 

然后使用toggle方法：

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

http://jsfiddle.net/J2YgE/

Answer 2

试试这个 ：

$("#showhide").on('click', function(){
    $(".more").children("div").slideToggle();
    return false;
});

演示

编辑

要有选择地切换 div，请给出一个可以选择它们的类。

<div class="hideMe">
    ...
</div>

然后，下面的 jQuery 将只作用于那些 divs ：

$("#showhide").on('click', function(){
    $(".more").children("div.hideMe").slideToggle();
    return false;
});

演示

编辑 2

这是一个适用于您更完整代码的版本：

$(".showhide").on('click', function() {
    $(this).closest(".vrsticaoglas").find(".more").children("div").slideToggle();
    return false;
});

演示