javascript - 在内部单击时保持 Bootstrap 下拉菜单打开

Question

我有一个 Bootstrap 下拉菜单。我希望它在我点击其中时保持打开状态，但在点击下拉切换按钮或菜单外时关闭。

当我在 input 中输入内容时，下拉菜单似乎没有关闭，但当我单击下拉菜单中的其他任何地方时，它会关闭。

问:如何使用 jQuery 避免这种情况？

下面是我的HTML:

<div id="navbar">
  <nav class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="collapse navbar-collapse" id="navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">MENU</a> 
          <div class="dropdown-menu">
            <p>HELLO</p>
            <input>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</div>

Demo in Bootply

Answer 1

您可以使用以下 JavaScript 手动打开和关闭下拉菜单:

$(function() {

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

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

  $(window).on('click', function() {
    $('.dropdown-menu').slideUp();
  });

});

StackSnippets 中的演示

$(function() {

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

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

  $(window).on('click', function() {
    $('.dropdown-menu').slideUp();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div id="navbar">
  <nav class="navbar navbar-default navbar-static-top" role="navigation">
    <ul class="nav navbar-nav">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">MENU</a>
        <div class="dropdown-menu">
          <p>Hello</p>
          <input type="text">
        </div>
      </li>
    </ul>
  </nav>
</div>