Question

我想一次扩展/折叠一个容器。当我点击第一个容器时，第二个容器应该折叠，当第二个容器展开时，第一个容器应该自动折叠。以下是小提琴。请指导......谢谢

 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();

<强> Updated Fiddle

Answer 2

您可以找到任何展开的content元素，然后将其折叠为

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

演示：Fiddle

Answer 3

使用此

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

在调用slideToggle函数之前，不要忘记更新标题文本

展开/折叠问题

3 个答案: