javascript - 如何使用 stopPropagation 使 toggleClass 的点击事件起作用？

Question

我正在构建一个下拉组件。我想:

1. 在点击按钮时显示下拉菜单，
2. 第二次点击同一个按钮时隐藏下拉菜单，
3. 在其外部点击时隐藏下拉菜单，
4. 在下拉框内点击时不隐藏下拉框，
5. 一次只能看到一个下拉菜单。

我有以下代码:

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

它不会隐藏第二次单击同一按钮时的下拉菜单。如果要删除 $('.js-dropdown').removeClass('is-open');，则当单击另一个按钮时，下拉菜单将保留。

我猜问题出在使用带有 stopPropagation 的 toggleClass 的点击事件。

我将不胜感激。

Demo

Answer 1

更改您当前的代码，如下所示:

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

重点是您的下拉菜单应该是“互斥的”:当一个出现时，另一个会同时隐藏。