javascript - how do i use slidetoggle and allow only one div open at a time? - Stack Overflow

admin管理员组

文章数量:1290956

Code:

$('.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');
});

If you click on any of the boxes, the previously active div closes as expected.

When you try to close the same div which is active, it opens right back up. How do I keep everything else the same but correct the behavior so that it doesn't reopen?

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');
});

If you click on any of the boxes, the previously active div closes as expected.

When you try to close the same div which is active, it opens right back up. How do I keep everything else the same but correct the behavior so that it doesn't reopen?

• javascript
• jquery
• slidetoggle

Share Improve this question Follow asked Sep 26, 2012 at 0:07 micahmicah 1,97566 gold badges2727 silver badges4040 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Try this:

$('.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

jQuery iterates element collections naturally so your loops are irrelevant in this case. Here's the mented updated code:

$('.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

本文标签： javascripthow do i use slidetoggle and allow only one div open at a timeStack Overflow