如何使用stopPropagation为toggleClass设置click事件？

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的click事件。

我会感激任何帮助。

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

关键是你的下拉菜单应该是“互相排斥的”：当一个人出现时 - 另一个人同时隐藏。

Answer 2

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

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