1

我正在开发一个网站，该网站使用 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>

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

4

2 回答 2

3

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

现场演示

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

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

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

于 2013-09-09T21:28:27.123 回答
0

除了 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/

于 2013-09-09T22:10:00.047 回答