如何防止下拉菜单在内部点击时关闭？

Question

我正在使用Bootstrap为我的网站创建一个下拉菜单，但我遇到了一些问题。

在我的网站上，如果点击“选择人群”，则将弹出窗口（FYI：单击“提交”将在其中显示内容）。当我在其中单击时，它总是关闭。我如何防止它这样做？我只想在单击字段外部时关闭它。

这是我使用的代码：

CSS：

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

.dropdown-menu:before {
  position: absolute;
  top: -7px;
  left: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.dropdown-menu:after {
  position: absolute;
  top: -6px;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  border-left: 6px solid transparent;
  content: '';
}

HTML:

<div class="dropdown">
    <button data-toggle="dropdown" id="submitButton" type="button" id="pops" >Select Populations</button>
    <ul id="popupDropDown" class="dropdown-menu" role="menu" aria-labelledby="dLabel">

    </ul>
</div>

- Vanquiza

---

这对我不起作用。当我在气泡内部单击时，气泡仍然关闭。 - Sina Sohi

两件事情：1. 您有6个使用相同ID的按钮：submitButton，请记住ID必须是唯一的；2. 当您单击<Population>时，您的div“dropdown”将被赋予一个类“open”，这将使您的下拉菜单显示，因此如果您想要它保持不变，您必须更改事件侦听器以正确处理此问题。 - Godinall

Answer 1

'.dropdown-menu' 捕获了冒泡的事件。在这种情况下，没有必要捕获下拉菜单中的元素。

e.stopPropagation() 阻止事件从DOM树向上冒泡，防止任何父处理程序收到事件通知。

$('.dropdown-menu').on('click', function(e) {
  e.stopPropagation();
});

- Vanquiza

Answer 2

Bootstrap 5现在有一个自动关闭特性，您可以配置它的行为。

- tmsss

Answer 3

请在 button html 标签中使用 data-bs-toggle 参数。

示例： <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false"> 可点击的元素 </button> data-bs-toggle 的值可以是 data-bs-auto-close="true" 或 "false" 或者 data-bs-auto-close="outside" 或 "inside"。

我在我的代码中尝试了这个方法，它运行良好。

- Abhiz

---

请注意，自动关闭数据属性是在Bootstrap 5中引入的。 - Nick