2

我是 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');
});

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

4

4 回答 4

1

您可以使用下一个方法：

$('.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');
});​

小提琴样本：http: //jsfiddle.net/johnkoer/EGzCE/6/

于 2012-08-31T16:36:40.533 回答
1

您可以对 div 使用相对遍历，如下所示：

$('.moreinfo').click(function(e) {
    e.preventDefault();
    $(this).parent().next('.cont-btm').toggle('fast');
});
于 2012-08-31T16:37:53.913 回答
0

像这样更改代码：

    $('.cont-btm').hide();
    $('.morelink').click(function(e) 
    {
        e.preventDefault();
        $(this).parent().next().toggle('fast');
    });
于 2012-08-31T16:41:37.850 回答
-1

如果你不能给这个div添加一个类名（或id），你能在页面中找到它是哪个数字元素吗？也就是第一个、第二个、第三个等div？如果是这样，您可以使用 jQuery 的伪选择器来获取 div。例如 :nth-child 是一个很好的。如果找不到数字，那么由于没有唯一标识符，因此如果不通过非常周到的方式就无法做到这一点，例如比较 divs 内容中的 html 字符串，然后在匹配时执行事件处理程序. 关键是以某种方式使该元素独一无二。

于 2012-08-31T16:42:25.733 回答