javascript - jQuery 切换仅适用于顶部元素

Question

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

我希望切换功能适用于<li>上的每个单独项目<ul>，因此我可以针对要单独隐藏/显示的元素。但是由于某种原因，只有顶部元素具有切换效果；其余的没有反应。

谁能解释为什么会这样？

score 2 · Accepted Answer

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

<div class="trigger"> ...

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

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

score 0 · Accepted Answer

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

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

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

然后：

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

以类而不是 id 为目标。

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

0

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

于 2013-07-18T17:35:16.457 回答

5 回答 5