如何使用stopPropagation使toggleClass的click事件起作用？

Question

I'm building a dropdown component. I want to:

1. show dropdown on button click,
2. hide dropdown on second click on the same button,
3. hide dropdown on click outside of it,
4. do not hide dropdown when click inside of it,
5. only one dropdown can be visible at once.

I have the following code:

$('.js-dropdown-toggler').click(function(e){
  $('.js-dropdown').removeClass('is-open');
  $(this).next('.js-dropdown').toggleClass('is-open');
  e.stopPropagation();
});

$('html').click(function(){
  if ($('.js-dropdown').hasClass('is-open')) {
    $('.js-dropdown').removeClass('is-open');
  }
});

$('.js-dropdown').click(function(e){
  e.stopPropagation();
});

It doesn't hide the dropdown on the second click on the same button. If to remove $('.js-dropdown').removeClass('is-open'); then dropdowns remain when click on the another button.

I guess the problem is with using click event for toggleClass with stopPropagation.

I'll appreciate any help.

Demo

Answer 1

Change your current code as shown below:

$('.js-dropdown-toggler').click(function(e){
  var current = $(this).next('.js-dropdown');
  current.toggleClass('is-open');
  $('.js-dropdown').not(current).removeClass('is-open');
  e.stopPropagation();
});

$('html').click(function(){
  if ($('.js-dropdown').hasClass('is-open')) {
    $('.js-dropdown').removeClass('is-open');
  }
});

The point is that your dropdowns should be "mutually exclusive": when one is showing up - the other goes to hide simultaneously.

Answer 2

只需在处理程序中为'.js-dropdown-toggler'删除此行：

$('.js-dropdown').removeClass('is-open');