Question

我是JQuery的新手，并希望在一个问题上得到一些帮助。当我点击某个链接时，我有一些内容，我想扩展和收缩。它类似于：

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

示例小提琴：http://jsfiddle.net/johnkoer/EGzCE/6/

Answer 2

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

$('.moreinfo').click(function(e) {
    e.preventDefault();
    $(this).parent().next('.cont-btm').toggle('fast');
});

Answer 3

更改代码如下：

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

Answer 4

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

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

4 个答案: