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

标签 jquery

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

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

最佳答案

您可以使用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/

关于jquery - 使用 jquery 显示项目列表的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12219281/

相关文章:

php - Select2 AJAX Multiple 无法正常工作

javascript - 无法格式化时间输出

javascript - 错误 "Uncaught TypeError: $(...).datetimepicker is not a function"

javascript - 有没有办法更新 HTML 中定义的现有数组?

javascript - 如何从对象数组中获取特定的 JSON 元素 (jQuery)

javascript - 为什么加载后无法获取图像宽度和高度?

javascript - Jquery 从选择框中隐藏/显示 div 不起作用,我不明白为什么?

jquery - html页面加载后文本消失

jquery - 如何编写一个 jQuery 函数,通过一系列元素一次执行一个操作?

javascript - 在幻灯片导航中选择图像幻灯片