如何使单击事件与toggleClass和stopPropagation一起工作？

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');，则单击另一个按钮时下拉式保持不变。

我想问题是在toggleClass和stopPropagation中使用click事件。

我会感谢你的帮助。

演示

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