展開/折疊問題

Question

我想一次擴展/折疊一個容器。 當我點擊第一個容器時，第二個容器應該折疊，當第二個容器展開時，第一個容器應該自動折疊。 以下是小提琴。 請指導......謝謝

http://jsfiddle.net/awaises/eK8X5/1138/

 jQuery

 $(".header").click(function () {
     $header = $(this);
     $content = $header.next();    
     $content.slideToggle(500, function () {
         $header.text(function () {
             return $content.is(":visible") ? "Collapse" : "Expand";
         });
     });
 });

Answer 1

您可以將此行添加到您的點擊處理程序：

$(".header").not(this).text('Expand').next().slideUp();

更新小提琴

Answer 2

您可以找到任何展開的content元素，然后將其折疊

$('.content').not($content).stop(true).filter(':visible').slideUp(500, function(){
    $(this).prev().text('Expand')
})

演示： 小提琴

Answer 3

用這個

$(".content").not($content).slideUp();

在調用slideToggle函數之前，不要忘記更新標題的文本