1

我试图弄清楚当我点击这些可折叠元素时，是否有办法使用 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>

这是我尝试过的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;
});
4

2 回答 2

2

好吧，我很确定您的标记是无效的，因为只有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();
});​

这是工作示例。

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

于 2012-06-28T21:09:50.120 回答
0

您需要稍微重组您的列表，您希望将孩子保留<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;
});
于 2012-06-28T21:06:13.140 回答