单击里面时保持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

问题Avoid dropdown menu close on click inside，你可以简单地从dropdown内部停止传播：

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

Stack Snipets中的演示

＆＃13;

＆＃13;

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

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>


<div class="dropdown allow-focus">
  <button id="dropdownLabel" type="button" class="btn btn-default"
          data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu panel" aria-labelledby="dropdownLabel">
    <div class="col-xs-12">
      What's Your Name?
      <input type="text" placeholder="Name" class="form-control" />
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

  

注意：要解决相反的问题（保持打开直到点击），您可以参考：

     

Keep Bootstrap Dropdown Open When Clicked Off

Answer 2

您可以使用以下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>