關閉手風琴當單​​擊另一個手風琴

Question

寫這個jQuery手風琴，想要關閉另一個一次選擇，我應該怎麼做這個手風琴......

$(function() { 
    $("td.collapsable").find(".hidden").hide(); 
    $("table").click(function (event) { 
     event.stopPropagation(); 
     var $target = $(event.target); 
     if ($target.closest("td").attr("colspan") > 1) { 
      $target.slideUp(); 
     } else { 
      $target.closest("tr").next().find(".hidden").slideToggle(); 
     } 
    }); 
}); 

Answer 1

看到這個：DEMO

$(function() { 
    $("td.collapsable").find(".hidden").hide(); 
    $("table").click(function (event) { 
     event.stopPropagation(); 
     var $target = $(event.target).closest("tr").next().find("td.collapsable").find(".hidden"); 
     $("td.collapsable").find(".hidden:visible").not($target).slideUp(); 
     $target.slideToggle(); 
    }); 
}); 

Answer 2

這裏是我做了一個快速的事，我不知道知道它是否可以應用於你的情況，因爲你沒有向我們展示代碼，但有人可能會覺得它有用。在許多方面可以達到同樣的效果，我選擇這樣做。

jsFiddle Example here

$('span').click(function(){ 
    $(this).addClass('active'); 
    $(this).siblings('.level1').slideDown(200); 
    $(this).parent('li').siblings('li').children('span').removeClass('active'); 
    $(this).parent('li').siblings('li').children('.level1').slideUp(200); 
}); 

Answer 3

只需添加一個.toggler您TR元素是可點擊：

LIVE DEMO

$(function() { 
    $("td.collapsable").find(".hidden").hide(); 
    $(".toggler").click(function(){ 
     var myHiddenEl = $(this).next('tr').find('.hidden'); 
     var toggAnim = myHiddenEl.css("display")=='none' ? "slideDown" : "slideUp" ; 
     $('.hidden').slideUp(); 
     myHiddenEl[toggAnim](); 
    }); 
});