0

我有一些问题，希望你能帮忙。

我有以下 HTML 代码

<h4><a class="trigger">Click </a></h4>

<ul class="panel">
<li>List items bla bla bla </li>
<li>List items bla bla bla </li>
<li>List items bla bla bla </li>
</ul>

<h4><a class="trigger">Click </a></h4>

<ul class="panel">
<li>List items bla bla bla </li>
<li>List items bla bla bla </li>
<li>List items bla bla bla </li>
</ul>

我希望点击它会切换。我在 jQuery 中有以下代码：

$(function(){

    $('ul.panel').hide();
    $("a.trigger").click(function(){
        $("ul.panel").slideToggle("fast");
        $(this).toggleClass("active");
        return false;
    });
});

现在我知道它不起作用，因为它正在选择所有项目。我怎样才能使用它，以便它只切换被点击的实际触发器而不切换所有触发器？我曾尝试使用 FIND、SIBLINGS、NEXT 等，但我不能。

任何帮助，不胜感激。

谢谢！！

4

1 回答 1

0 
$('a.trigger').click(function() {
    $(this).closest('h4').next('.panel').slideToggle();
});

工作示例

这里的概念是您遍历 DOM 以到达一个可以概括您的命令的共同点。在我的示例中，我向外导航到一个共同的祖先 ( h4)，然后找到与该父元素相关的下一个列表。如果您有模板化布局，这是一种非常常见的 DOM 遍历技术。

于 2012-07-27T00:31:13.287 回答