我如何使用 slidetoggle 并一次只允许打开一个 div？答案

【问题标题】：how do i use slidetoggle and allow only one div open at a time?我如何使用 slidetoggle 并一次只允许打开一个 div？
【发布时间】：2012-09-17 13:17:31
【问题描述】：

代码：http://codepen.io/anon/pen/sumIx

$('.module article').hide();
});
$('.module-content, .module-photo').click(function() {
  for (var i = 0; i < 5; i++) {
     $('.module article').slideUp();
  } $(this).parent().children('article').slideToggle('slow');
});

如果您单击任何框，之前活动的 div 将按预期关闭。

当您尝试关闭同一个处于活动状态的 div 时，它会立即重新打开。如何保持其他所有内容不变但纠正行为以使其不会重新打开？

【问题讨论】：

标签： javascript jquery slidetoggle

【解决方案1】：

试试这个：

$('.module-content').click(function() {
   var $this = $(this).closest('section').find('article');
   $('.module article').not($this).slideUp();
   $this.slideToggle('slow');
});

http://codepen.io/anon/pen/DBirp

【讨论】：

+1 表示.closest() 和.find()，如果 OP 在文章和 section/div 之间添加更多标记，它们确实更有弹性。我的回答保留了更多 OP 的原始代码。 =]
@FabrícioMatté 你的答案是很好，在这种情况下他可以发布另一个问题:)，我在开玩笑，+1 使用@ 987654326@ 和注释良好的代码。

【解决方案2】：

jQuery 自然地迭代元素集合，因此在这种情况下你的循环是无关紧要的。这是已注释的更新代码：

$('.module-content').click(function() {
    //stores a reference to the clicked section's article
    var article = $(this).parent().children('article');
    //hides all other articles
    $('.module article').not(article).slideUp();
    //toggles the clicked one
    article.slideToggle('slow');
});

http://codepen.io/anon/pen/dgJDr

【讨论】：