Question

出于特定原因，我必须在下拉成员中调用event.stopPropagation。

现在，点击它时，下拉列表不会关闭。如何强制它以编程方式关闭？

我的HTML：

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu1<span class="caret"></span></a>
  <ul class="dropdown-menu">
      <li><a href="#" id="it1">Item 1</a></li>
      <li><a href="#" id="it2">Item 2</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#" id="it3">Item 3</a></li>
      <li><a href="#" data-toggle="modal" data-target="#it4-modal">Item 4</a></li>
  </ul>
 </li>

我的jQuery js：

$('#it3').click(function (e) {
  e.stopPropagation();
  doStuff();
});

我已经尝试了$('.dropdown-toggle').toggle()和$('.dropdown-toggle').dropdown('toggle');之类的内容，但没有成功。

Answer 1

使用

进行管理

$('[data-toggle="dropdown"]').parent().removeClass('open');

根据https://stackoverflow.com/a/10941616/6474503

Answer 2

Bootstrap 4（2018年10月）：

$('.dropdown.show,.dropdown-menu.show').removeClass('show');

它隐藏了所有打开的Bootstrap下拉菜单。

如何关闭stopPropagation后的Bootstrap下拉列表？

2 个答案: