jQuery切换仅适用于<ul>

Question

我正在尝试在我的Rails 3.2.1应用程序中实现jQuery切换项。

我希望该切换可用于<ul>上每个单独的<li>项目，因此我可以确定要单独隐藏/显示的元素。 但是由于某种原因，只有最上面的元素才具有切换效果。 其余的都没有回应。

这是jsFiddle 。

谁能解释为什么会这样？

Answer 1

这是因为所有div都具有相同的id ，这是无效的HTML。 由于DOM只希望有一个具有任何给定ID的元素，因此当您编写$("#trigger") ，它只会选择找到的第一个元素。 将ID更改为类。

<div class="trigger"> ...

并将您的ID选择器更改为类选择器。

$('.trigger').click(/* ... */);

的jsfiddle

Answer 2

ID属性在页面上必须唯一。 将所有id =“ trigger”更改为class =“ trigger”，然后尝试：

$(".trigger").click(function (){
     $(this).find('.menu-item').toggle();
});

Answer 3

的jsfiddle

$(".trigger").click('.menu-item', function () {
    $(".menu-item", this).toggle();
});

Answer 4

具有相同ID的多个元素是无效的HTML，而jQuery将仅以该ID找到的第一个为目标。

我更新了您的小提琴以使用类而不是ID

    <div id="trigger" class="trigger">

然后：

    $(".trigger").click(function (){
        $(".menu-item", this).toggle();
    });

定位类而不是ID。

Answer 5

为什么元素具有相同的id ？ ID应该是唯一的。 如果要选择所有<li> ，请使用CSS选择器，例如$(".toggle-li") 。