Question

我正在跟踪我在stackoverflow上找到的小提琴

$('li').on('click', function(e){
  $(this).find('.outer').slideToggle();
  $(this).toggleClass('active', 400);
});

一切都按照需要运行，但是，当我点击多个向下滑动时，它们必须按照打开的顺序关闭，因为一旦点击了新的向下滑动它们就不会关闭。

有一种方法可以在打开新的向下滑动后关闭每张幻灯片吗？

Answer 1

您可以定位点击的'.outer'兄弟姐妹关闭其他'li'：

$('li').on('click', function (e) {
    $(this).find('.outer').slideToggle();
    $(this).toggleClass('active', 400);
    //remove the active class, then move to its '.outer' child and slide it up
    $(this).siblings().removeClass('active').find('.outer').slideUp();
});

Answer 2

马克S是正确的

如果你想进一步优化代码，你可以写这样的

$('li').on('click', function(e){
  $(this).find('.outer').slideToggle().end().siblings().removeClass('active').find('.outer').slideUp();                  
  $(this).toggleClass('active', 400);
});

旁注：

在jsfiddele中你提供了代码div style =“width：156px; height：声明了内联样式。它不是很好的练习而是你可以在div上定义类并在样式表中声明相应的样式

Jquery下推/ SlideDown冲突

2 个答案: