Javascript 更有效的可折叠列表定位

我想知道，当我点击这些可折叠元素时，是否有办法使用jquery的slideDown/slideUp/slideToggle函数来设置它们的动画。以下是元素的html布局的一个片段：

<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>

---

您需要稍微重新构造列表，您希望将子项

保留在父项

$('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;
});

---

我很确定你的标记是无效的，因为只有

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>​​​​​​​​​​​​​​​​​​​​​​​​​​​​

---

如您所见，我只需向上滑动所有

ul

部分，然后在单击锚定后向下滑动下一部分。

您可以编写一次单击函数并根据类名进行切换。。。但是你的代码也没那么长。谢谢！它实际上比你看到的要长得多。。基本上，有更多的标签和更多的类别比显示。我缩短它是为了发布这个问题。听起来你想要一个新的答案。是否有jquery手风琴无法工作的原因？您的HTML无效。在将新子列表设为子列表之前，您正在关闭列表项。已打开的元素似乎在单击时仍未关闭。Ha。。哦，对不起。有些手风琴就是这样工作的。修好了，谢谢！不过我也注意到了其他一些东西——当我单击内部列表项时，它会折叠整个元素。。固定的。请注意，我将选择器从

.outer li a

更改为

.outer>li>a

。这确保只有第一级的

a

标记会导致内容显示。是否存在不使用任何标记的变体？我试图修改代码，但完全失败了。

<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();
});​