Question

我正在开发一个网站，它使用ruby on rails来检索多个链接并将它们放入一个带有多个li元素'head'或类'link'的ul中。

我正在尝试使用此手风琴效果效果，因此当用户点击“头部”时，后续的孩子“链接”li会在单击另一个“head”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>

这是我到目前为止所获得的最接近的效果。我真的很感激我得到的任何帮助。

Answer 1

你真的得到了它，但你只是将第一个.head的点击定位为所有这些。比，.nextUntil()方法将帮助您定位所需的元素。

LIVE DEMO

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

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

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

Answer 2

根据Roko的回答，这可能有助于手风琴功能，折叠点击新头时显示的任何不相关链接：

$('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/

一个ul多个班级的手风琴式菜单

2 个答案: