stopPropagation 后如何关闭 Bootstrap 下拉菜单？

Question

For a specific reason, I had to invoke event.stopPropagation within a dropdown member.

Now, the dropdown doesn't close when I click it. How do I force it to close programatically?

My 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>

And my jQuery js:

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

I already tried things like $('.dropdown-toggle').toggle() and $('.dropdown-toggle').dropdown('toggle'); , but without success.

Answer 1

Bootstrap 4 (October 2018):

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

It hides all opened Bootstrap dropdowns.

Answer 2

Managed to do it with

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

According to https://stackoverflow.com/a/10941616/6474503