如何在内部点击时阻止我的下拉关闭？ [英] How do I prevent my dropdown from closing when clicking inside it?

问题描述

我正在使用Bootstrap为我的网站创建一个下拉列表，但我正在使用它的一些问题。

I'm using Bootstrap to create a dropdown for my website, but I am having some problems with it.

在我的网站上，如果点击选择人口，将出现弹出窗口（仅供参考：单击提交将显示其中的内容）。当我点击它内部时，它总是关闭。我怎么能阻止它这样做？如果在字段外点击，我只希望它关闭。

On my website, if clicked on "Select Populations" the popup will appear (FYI: clicking "submit" will have things appear in it). And when I click inside of it, it always closes down. How can I prevent it from doing so? I only want it to close if clicked outside of the field.

这是我使用的代码：

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>

推荐答案

'。dropdown-menu'抓住泡沫。在这种情况下，没有必要捕获下拉列表中的元素。

'.dropdown-menu' catches the the bubble. There is no need to catch elements inside of the dropdown in this case.

e.stopPropagation（）可防止事件冒泡DOM树，从而阻止任何父处理程序收到通知。

e.stopPropagation() prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

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

这篇关于如何在内部点击时阻止我的下拉关闭？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！