手风琴类型菜单关闭除选定的一个以外的所有div

Question

I'm trying to do an accordion type menu without actually using the plugin. I have a jsfiddle here : https://jsfiddle.net/t7mafd2a/1/

I can toggle the menu but what I want is when one is open the other close, not just have them stay open when clicked.

  $('.navContainer li div').click(function (e) { e.preventDefault(); var $t = $(this); $t.next('.navtoggle').toggleClass('active', 400); }); 

  .navtoggle { display: none; } .active { display: block; } .navContainer { display: block; } ul, li { list-style: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="navContainer"> <ul> <li> <div>Category 1</div> <ul class="navtoggle"> <li><a href="http//www.google.com">Test</a></li> <li><a href="http//www.google.com">Test</a></li> </ul> <div>Category 2</div> <ul class="navtoggle"> <li><a href="http//www.google.com">Test</a></li> </ul> <div>Category 3</div> <ul class="navtoggle"> <li><a href="http//www.google.com">Test</a></li> </ul> </li> </ul> </div> 

Answer 1

Simply add this line before you do toggleClass

$('.navtoggle').removeClass('active');

This will remove the active class from all of your navtoggle elements before you open the one you just clicked.

Full code:

$('.navContainer li div').click(function(e) {
  e.preventDefault();
  var $t = $(this);
  var $next = $t.next('.navtoggle');
  $('.navtoggle').not($next).removeClass('active');
  $next.toggleClass('active', 400);
});

Answer 2

 $('.navContainer li div').click(function (e) { e.preventDefault(); $('ul.active').removeClass('active'); var $t = $(this); $t.next('.navtoggle').toggleClass('active', 400); }); 

 .navtoggle { display: none; } .active { display: block; } .navContainer { display: block; } ul, li { list-style: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="navContainer"> <ul> <li> <div>Category 1</div> <ul class="navtoggle"> <li><a href="http//www.google.com">Test</a></li> <li><a href="http//www.google.com">Test</a></li> </ul> <div>Category 2</div> <ul class="navtoggle"> <li><a href="http//www.google.com">Test</a></li> </ul> <div>Category 3</div> <ul class="navtoggle"> <li><a href="http//www.google.com">Test</a></li> </ul> </li> </ul> </div>