javascript - 一个 ul 中的 li Accordion 式菜单，具有多个类

Question

我在一个网站上工作，该网站使用 ruby​​ on rails 来检索多个链接，并将它们放入一个 ul 中，其中包含多个 li 类的“head”或“link”类元素。

我正在尝试使用它获得 Accordion 风格的效果，因此当用户单击“head”li 时，后续子“链接”li 会出现并在单击另一个“head”li 时消失。

我知道 jquery ui 中的 Accordion ，但我不认为这是元素中使用的 Rails 代码的一个选项。我只是一名实习生，我不确定 CTO 是否会花时间重做他的代码以适合我。我正在尽最大努力利用我所拥有的。

代码示例:

<ul>
    <li class = "head">HEAD</li>
        <li class = "link">link</li>
        <li class = "link">link</li>
        <li class = "link">link</li>
    <li class = "head">HEAD</li>
        <li class = "link">link</li>
        <li class = "link">link</li>
        <li class = "link">link</li>
    <li class = "head">HEAD</li>
        <li class = "link">link</li>
</ul>

<script>
    $('li.link').hide();

    $('li.head:first-child').click(function(){
        $('li.link').slice(0, 3).slideToggle('slow');
    });
</script>

这是迄今为止我获得的最接近预期效果的结果。我真诚地感谢我得到的任何帮助。

Answer 1

你真的几乎完全理解了它，但你只是针对第一个 .head 的点击而不是所有的点击。然后，.nextUntil() 方法将帮助您定位所需的元素。

LIVE DEMO

$('li.link').hide();

$('li.head').click(function(){
    $(this).nextUntil('.head').slideToggle('slow');
});

<子>文档:
http://api.jquery.com/nextuntil/