Question

我正在创建一个列表，其中的项目是使用CSS和JQuery折叠/展开。

当我点击第一个项目展开它时，所有项目都展开，因为类的名称是相同的。

我是否只能区分一个项目与保持类名相同的列表？

我的代码在下面并且共享相同的类名。

<div class="flip">Unfold!</div>
<div class="panel">Hello<br>This is First</div>

<div class="flip">unfold 2!</div>
<div class="panel">hello<br>This is Second</div>

JQuery代码在

之下

$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideDown("slow");
});
});

JQuery是否有命令来区分项目？

您也可以查看我的来源。

http://jsfiddle.net/qmavqug6/

提前感谢您的帮助。

Answer 1

您要定位的.panel元素是所点击的flip的下一个兄弟，因此请使用.next()查找目标panel

$(document).ready(function () {
    $(".flip").click(function () {
        $(this).next(".panel").slideDown("slow");
    });
});

演示：Fiddle

Answer 2

您可以将.next用于此

$(this).next(".panel").slideDown("slow");

DEMO

Answer 3

jQuery有一个:nth-child() http://api.jquery.com/nth-child-selector/，可以让您选择特定的项目。

例如，

$(".panel:nth-child(1)")将获得第一个匹配的项目。

使用JQuery区分和处理一个Div项

3 个答案: