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

Posted 2023-05-07

【中文标题】在内部单击时保持 Bootstrap 下拉菜单打开

【英文标题】：Keep Bootstrap Dropdown Open When Clicked Inside

【发布时间】：2017-11-22 14:45:00

【问题描述】：

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

当我在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

【问题讨论】：

应该在这里找到答案：***.com/questions/25089297/…

@NathanGalea 我试过了，但对我没用

【参考方案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>

【讨论】：

这个有问题。当我单击其他链接并尝试再次单击菜单时，子下拉列表不再显示。我该如何解决？

@H.Kim 您能否通过再次编辑您的问题来发布您的代码。这样我就可以猜出会出现什么问题..？

例如，当我单击其他链接并被定向到另一个页面时，我无法再打开menu 我目前正在使用 ruby​​ on rails

您是否在所有要达到此效果的页面上都使用此脚本..？

我想是的。我将 javascript 代码放入 application.js 文件中，它应该会影响所有页面。我的其他链接如下所示：<li ><%=link_to( image_tag("menu2.png"), root_url) %></li> 当我点击这样的链接时，它不起作用。但如果我刷新页面，它会起作用。

【参考方案2】：

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

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

堆栈片段中的演示

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

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

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

Keep Bootstrap Dropdown Open When Clicked Off