更高效的可折叠列表定位答案

【问题标题】：More efficient collapsable list targeting更高效的可折叠列表定位
【发布时间】：2012-06-30 10:49:11
【问题描述】：

我试图弄清楚当我点击这些可折叠元素时，是否有办法使用 jquery 的 slideDown/slideUp/slideToggle 函数来制作动画。这是元素的html布局的sn-p：

<ul> 
                    <li class="category1"><a href="#"></a></li>
                        <ul>
                            <div class="tag1">
                                <li class="cat2"><a href="#">derp</a></li>
                                <li class="cat2"><a href="#">derp</a></li>
                                <li class="cat2"><a href="#">derp</a></li>
                            </div>

                        </ul>
                    <li class="category2"><a href="#"></a></li>
                        <ul>
                            <div class="tag2">
                                <li class="cat2"><a href="#">derp</a></li>
                                <li class="cat2"><a href="#">derp</a></li>
                                <li class="cat2"><a href="#">derp</a></li>
                            </div>  
                        </ul>
                    <li class="category3"><a href="#"></a></li>
                        <ul>
                            <div class="tag3">
                                <li class="cat2"><a href="#">derp</a></li>
                                <li class="cat2"><a href="#">derp</a></li>
                                <li class="cat2"><a href="#">derp</a></li>
                            </div>  
                        </ul>

</ul>

这是我尝试过的 javascript 代码。它有效，但它很长。我想知道是否有更有效的方法来完成同样的事情。

$('.category1').click(function(){
    $('.tag1').slideToggle('200');
    $('.tag2').slideUp('200');
    $('.tag3').slideUp('200');
        return false;
});

$('.category2').click(function(){
    $('.tag1').slideUp('200');
    $('.tag2').slideToggle('200');
    $('.tag3').slideUp('200');
        return false;
});

$('.category3').click(function(){
    $('.tag1').slideUp('200');
    $('.tag2').slideUp('200');
    $('.tag3').slideToggle('200');
        return false;
});

【问题讨论】：

您可以编写一键式函数并根据类名进行切换...但是您的代码也没有那么长。
谢谢！它实际上比你看到的要长得多。基本上，标签和类别比显示的要多。为了发布这个问题，我缩短了它。
听起来你想要standard accordion。 jquery 手风琴不起作用有什么原因吗？
您的 HTML 无效。在将新的子列表设为子列表之前，您将关闭列表项。

标签： javascript jquery slidetoggle collapse

【解决方案1】：

我很确定你的标记是无效的，因为只有 li 元素应该嵌套在 ul 元素中（如果我错了，请有人纠正我）。我将标记更改为：

<ul class="outer"> 
    <li>
        <a href="#"></a>
        <ul>
            <li class="cat1"><a href="#">derp</a></li>
            <li class="cat1"><a href="#">derp</a></li>
            <li class="cat1"><a href="#">derp</a></li>    
        </ul>
    </li>
    <li>
        <a href="#"></a>
        <ul>
            <li class="cat2"><a href="#">derp</a></li>
            <li class="cat2"><a href="#">derp</a></li>
            <li class="cat2"><a href="#">derp</a></li>    
        </ul>
    </li>
    <li>
        <a href="#"></a>
        <ul>
            <li class="cat3"><a href="#">derp</a></li>
            <li class="cat3"><a href="#">derp</a></li>
            <li class="cat4"><a href="#">derp</a></li>    
        </ul>
    </li>
</ul>

这是脚本：

$(".outer > li > a").on("click", function(event) {
    event.preventDefault();
    $(".outer ul").slideUp();   
    var next = $(this).next();
    if(next.is(":visible")) { return; }         
    next.slideDown();
});

And here is the working example.

如您所见，我只是将ul 部分向上滑动所有，然后在单击的锚点之后向下滑动下一个。

【讨论】：

已经打开的元素在点击时似乎仍然没有关闭。
哈.. 对不起。有些手风琴就是这样工作的。固定。
谢谢！不过，我也注意到了其他一些事情——当我点击内部列表项时，它会折叠整个元素。
糟糕.. 已修复。请注意，我将选择器从 .outer li a 更改为 .outer > li > a。这确保只有第一级 a 标记会导致内容显示..
是否有不使用任何标签的变体？我试图修改代码，但完全失败了。

【解决方案2】：

您需要稍微调整一下您的列表，您希望将子 <ul> 保留在父 <li> 中

$('li[class^=category]').click(function(){
  var cls = $(this).attr('class');
  cls = cls.split('y');
  cls = cls[1];
  $('.tag'+cls).slideToggle('200');          
  $('div[class^=tag]').not("div[class=tag"+cls+"]").slideUp('200');
  return false;
});

【讨论】：