jQuery切换仅适用于<ul>

jQuery toggle only working for the top element in the <ul>

本文关键字：lt ul gt 适用于 jQuery      更新时间：2023-09-26

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

我希望切换适用于<ul>上的每个单独的<li>项目，这样我就可以针对要单独隐藏/显示的元素。但由于某些原因，只有顶部元素具有切换效果；其他人没有回应。

这是jsFiddle。

有人能解释为什么会发生这种事吗？

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

<div class="trigger"> ...

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

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

jsFiddle

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

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

JSFIDDLE

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

具有相同id的多个元素是无效的HTML，jQuery将只针对它找到的具有该id的第一个元素。

我更新了你的小提琴使用类而不是id

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

然后：

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

以类而非id为目标。

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

相关文章：