jquery - 使用 jquery 显示项目列表的内容

Question

我是 JQuery 新手，希望在某个问题上获得一些帮助。我有一个 div，其中包含一些内容，当您单击某个链接时，我想扩展和收缩这些内容。它是这样的:

<div class="container">
<div class="cont-top">
<a class="morelink" href="#">More</a>
</div>
<div class="cont-btm">
<p>This is the content to be displayed</p>  
</div>
</div>

问题是这个容器 div 是由 php 循环动态生成的。如何编写 jquery 来仅打开此 div 的单个实例？这是我所拥有的，它有效，但显然它打开了所有的 div 而不仅仅是点击的那个。

$('.cont-btm').hide();
$('.morelink').click(function(e) {
e.preventDefault();
$('.cont-btm').toggle('fast');
});

我知道这是一个简单的问题，但我是编程新手，谢谢。

Answer 1

您可以使用next方法:

$('.cont-btm').hide();
$('.morelink').click(function(e) {
    e.preventDefault();
    // get the parent of the link and then get the next .cont-btm after the parent.
    $(this).parent().next('.cont-btm').toggle('fast');
});​

示例 fiddle :http://jsfiddle.net/johnkoer/EGzCE/6/