如何使用SlideToggle并且只允许一个div同时打开？

Question

Code: 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时，它会立即重新打开。我该如何保持其他所有内容不变，但更正其行为，使其不再重新打开？

- micah

Answer 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

- Ram

---

+1 对于 .closest() 和 .find()，它们更加弹性，以防 OP 在文章和 section/div 之间添加更多标记。我的答案保留了更多 OP 的原始代码。=] - Fabrício Matté

@FabrícioMatté，你的回答很好，如果需要的话他可以再发一个问题：），我在开玩笑，使用“not”和注释良好的代码值得点赞。 - Ram

Answer 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

- Fabrício Matté