如何使手風琴使用的兄弟姐妹

Question

我有手風琴和一些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/