Javascript 下拉列表需要多次单击才能打开

我通过javascript迭代创建了多个下拉列表。它工作得很好，只是有一点用户必须单击两次才能让下拉菜单工作

当用户单击某个下拉列表，而不是单击关闭它，然后单击另一个下拉列表，然后关闭第一个下拉列表时，就会发生这种情况，但是如果用户再次单击第一个下拉列表，则需要单击两次才能打开

在这种情况下，有没有办法只单击一次？ （我只粘贴了下拉html的相关代码）

$（document）.on（'turbolinks:load'，function（）{
$（'.dropbtn'）。单击（函数（）{
if（$（this）.hasClass（“活动”））{
$（this.parent（“.dropdown”）.find（“.dropdown content”）.removeClass（'show-dropdown'）；
$（this.removeClass（'active'）；
}否则{
$（'.dropdown content'）.removeClass（'show-dropdown'）；
$（this.parent（“.dropdown”）.find（“.dropdown content”）.addClass（'show-dropdown'）；
$（this.addClass（'active'）；
}
});
});
。显示下拉列表{
显示：块；
}

选择权▼
下拉列表
您能在下拉菜单外的任何点击中重置下拉菜单吗

  $('body').click(function() {
   // [TODO] add if statement to see if dropdown is active?...
   $(this).parent(".dropdown").find('.dropdown-content').removeClass('show-dropdown');
   $(this).removeClass('active');
  });

你能在下拉菜单外的任何点击中重置下拉菜单吗

  $('body').click(function() {
   // [TODO] add if statement to see if dropdown is active?...
   $(this).parent(".dropdown").find('.dropdown-content').removeClass('show-dropdown');
   $(this).removeClass('active');
  });

Iglo所说的似乎是正确的解决方案，尽管在不停止事件传播的情况下，他的解决方案会在弹出窗口打开时立即关闭。我认为，你需要防止事件传播，这样才能起作用

我建议的解决方案增加了一层：

$(document).click(function (event) {

    var multi_select = $(".multi-select-menu");
    if (multi_select.is(":visible")) {
        if (!$(event.target).closest('.multi-select-menu').length) {
            if (!isOpeningMultiSelect) {
                $('.multi-select-menu').slideUp(MULTI_SELECT_SLIDE_TIME);
            }
        }
    }

});

我有一组自定义的下拉列表，根本不使用输入标记

你可以在这里看到完整的代码，因为听起来我做的几乎和你做的完全一样

这是唯一一个不用注册就能看到下拉列表的例子，但是你可以随意注册一封假电子邮件。该网站正在开发中。一旦你这样做了，你可以在这个页面上看到大量的它们：

此页面显示了在下拉列表外单击以关闭另一个下拉列表的整个过程，以及在同一下拉列表中单击多个选择

（检查DOM，此下拉逻辑的代码在MultiSelect.js中）
Iglo所说的似乎是正确的解决方案，尽管在不停止事件传播的情况下，他的解决方案会在弹出窗口打开时立即关闭。我认为，你需要防止事件传播，这样才能起作用

我建议的解决方案增加了一层：

$(document).click(function (event) {

    var multi_select = $(".multi-select-menu");
    if (multi_select.is(":visible")) {
        if (!$(event.target).closest('.multi-select-menu').length) {
            if (!isOpeningMultiSelect) {
                $('.multi-select-menu').slideUp(MULTI_SELECT_SLIDE_TIME);
            }
        }
    }

});

我有一组自定义的下拉列表，根本不使用输入标记

你可以在这里看到完整的代码，因为听起来我做的几乎和你做的完全一样

这是唯一一个不用注册就能看到下拉列表的例子，但是你可以随意注册一封假电子邮件。该网站正在开发中。一旦你这样做了，你可以在这个页面上看到大量的它们：

此页面显示了在下拉列表外单击以关闭另一个下拉列表的整个过程，以及在同一下拉列表中单击多个选择

（检查DOM，此下拉逻辑的代码在MultiSelect.js中）