如何让手风琴使用兄弟姐妹

Question

我有accordeon和一些jquery脚本

    $(function () {
        $('.step-content').slideToggle(0);
        $('.step-title').click(function () {
            $(this).next('.step-content').slideToggle(100);
            $(this).children('.toggle-btn-down').toggleClass('toggle-btn-up');
        });
    });

我想折叠不活跃的项目

这是我的例子：

  

http://jsfiddle.net/spJWy/

Answer 1

您可以结合使用slideToggle，hasClass，toggleClass，not和hide来匹配所有其他元素，并相应地隐藏它们。

代码：

 $(function () {
     $('.step-content').slideToggle(0);
     $('.step-title').click(function () {
         var $stepContent=$(this).children('.step-content');
         var $stepIcon=$(this).children('.toggle-icon');
         $stepContent.slideToggle(100);
         if ($stepIcon.hasClass('toggle-btn-down')){
             $('.step-content').not($stepContent).hide(100)
             $('.toggle-icon').not($stepIcon).addClass('toggle-btn-down').removeClass('toggle-btn-up');
         }
         $stepIcon.toggleClass('toggle-btn-up toggle-btn-down');
     });
 });

演示：http://jsfiddle.net/RyXp2/