javascript - 如何用jquery制作滑动切换？

Question

我正在尝试使用 j-query 的滑动切换效果，但遇到了 HTML 问题。请看一下-:

        <li class="active Sub-Tag">Pork Ham</li>                                
        <li class="active-in active"><a onclick="call_content(146);" href="#">&gt; Double Smoked Ham</a></li>                                                           
        <li class="active-in active"><a onclick="call_content(147);" href="#">&gt; Prime Ham</a></li>                                                           
        <li class="active-in active"><a onclick="call_content(148);" href="#">&gt; Smoked Ham</a></li>  

        <li class="active Sub-Tag">Pork Lyoner</li>                             
        <li class="active-in active"><a onclick="call_content(149);" href="#">&gt; Pork Olive Lyoner</a></li>                                                           
        <li class="active-in active"><a onclick="call_content(150);" href="#">&gt; Pork Paprica Lyoner</a></li>                                                         
        <li class="active-in active"><a onclick="call_content(151);" href="#">&gt; Pork Pepper Lyoner</a></li>                                                          
        <li class="active-in active"><a onclick="call_content(152);" href="#">&gt; Pork Pista Lyoner</a></li>       

        <li class="active Sub-Tag">Pepperoni</li>                               
        <li class="active-in active"><a onclick="call_content(153);" href="#">&gt; Pork Pepperoni</a></li>   

我想展示 pig 肉火腿、 pig 肉莱昂纳、意大利辣香肠的切换效果。

建议我如何在不更改 html 和类的情况下进行操作。

Answer 1

我就是这样做的:

$('.Sub-Tag').click(function(){
    var current = $(this);

    while(current.next().hasClass('active-in') != false){
        current = current.next();
        current.slideToggle();
    }
});

JSFiddle demo here