我如何使用slidetoggle并且一次只允许一个div打开?

时间:2012-09-26 00:07:57

标签: javascript jquery slidetoggle

代码: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时,它会立即打开。如何保持其他所有内容相同但更正行为以便不重新打开?

2 个答案:

答案 0 :(得分:7)

试试这个:

$('.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 :(得分:4)

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