一个具有多个类的 ul 中的手风琴式菜单答案

【问题标题】：li accordion style menu in one ul with multiple classes一个具有多个类的 ul 中的手风琴式菜单
【发布时间】：2013-09-09 21:24:28
【问题描述】：

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

我正在尝试获得手风琴风格的效果，因此当用户单击“头部”li 时，随后的子“链接”li 出现并在单击另一个“头部”li 时消失。

我知道 jquery ui 中的手风琴，但我认为项目中使用的 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>

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

【问题讨论】：

您可能想为此创建一个fiddle 并描述当前正在发生的事情以及这与您希望看到的情况有何不同。这将使人们更容易做出回应。

标签： javascript jquery html css ruby-on-rails

【解决方案1】：

您确实得到了它几乎相当不错，但您只是针对第一个.head 的点击而不是所有这些。然后，.nextUntil() 方法将帮助您定位所需的元素。

LIVE DEMO

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

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

文档：
http://api.jquery.com/nextuntil/

【讨论】：

【解决方案2】：

进一步了解 Roko 的回答，这可能有助于手风琴功能，折叠单击新 Head 时显示的任何不相关链接：

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

$('li.head').click(function(){
    // gets all the previous links and hides them
    $(this).prevAll('.link').slideUp('slow');
    // gets all the links that come after the next head, and hides them too
    var nextHead = $(this).nextAll('.head').first();
    $(nextHead).nextAll('.link').slideUp('slow');

    // toggles all the relevant links for the current head
    $(this).nextUntil('.head').slideToggle('slow');
});

在这里演示：http://jsfiddle.net/xwbrB/7/

【讨论】：

@ryan 很高兴！ :)