更改 Bootstrap3 下拉按钮的点击行为答案

【问题标题】：Change click behavior on Bootstrap3 dropdown button更改 Bootstrap3 下拉按钮的点击行为
【发布时间】：2014-03-14 13:40:39
【问题描述】：

无法弄清楚如何正确更改 Bootstrap 3 下拉菜单上的点击行为。我基本上将下拉菜单用作临时输入，用户可以在其中键入名称然后提交。但是，如果他们单击输入文本字段，则会在输入任何内容之前关闭下拉菜单。

目标是仅以编程方式关闭下拉列表，尽管它仍然需要保持标准行为的 data-toggle 属性。

这是下拉菜单的代码：

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <i class="fa fa-flask icon-3x"></i>
  </button>
  <ul class="dropdown-menu heatmap-options" role="menu">
    <li><label>Formula </label><input type="text" placeholder="type a formula name"  /></li>
    <li class="divider"></li>
    <li><a href="javascript:;" class="btn btn-primary btn-sm">Create</a></li>
  </ul>
</div>

我不确定我是否需要做一些 Javascript 干预，完全重组它，或者是否有一些我不知道可以用于此的“选项”。感谢您的帮助！

【问题讨论】：

你有没有找到一个好的解决方案？
@alexw 我将项目迁移到 React.js 并发现它解决了我的许多问题，我用不同的解决方案解决了这个问题。
明白了。我自己也在考虑前端框架，但我听说过很多关于性能问题的消息。
@alexw 我发现 React.js 在性能方面的问题为零，对此我感到非常满意。它使用内存中的 DOM 在更新浏览器 DOM 之前计算更改。很方便。
好的，我会考虑的。实际上，我听说过关于 Angular 而不是 React 的性能问题。似乎这需要更多的研究。

标签： javascript twitter-bootstrap drop-down-menu

【解决方案1】：

您必须在 body 标记之前添加一些脚本，如下所示。

 <!DOCTYPE html>
    <html>
     <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>DropDown with Input Fields</title>
      <link href="assets/css/bootstrap.css" rel="stylesheet" type="text/css">
      <link rel="stylesheet" href="assets/css/font-awesome.css" />
     </head>
     <body>
      <div class="btn-group">
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="fa fa-flask icon-3x"></i></button>
        <ul class="dropdown-menu" role="menu">
          <li>
            <div class="input-group">
             <input type="text" class="form-control">
             <span class="input-group-btn">
             <button class="btn btn-default" type="button">Go!</button>
             </span>
            </div>      
         </li>
        </ul>
      </div>
     <script src="assets/js/jquery.js"></script>
     <script type="text/javascript" src="assets/js/bootstrap.js"></script>
     <script type="text/javascript">
      $('.dropdown-menu').on('click', function (e) {
       e.stopPropagation() 
      })
     </script>
     </body>  
    </html>

【讨论】：

如何在不禁用“确认”对话框的情况下使用它？