Javascript 更改Bootstrap3下拉按钮上的单击行为_Javascript_Twitter Bootstrap_Drop Down Menu

Javascript 更改Bootstrap3下拉按钮上的单击行为

javascript twitter-bootstrap drop-down-menu

Javascript 更改Bootstrap3下拉按钮上的单击行为,javascript,twitter-bootstrap,drop-down-menu,Javascript,Twitter Bootstrap,Drop Down Menu,无法确定如何正确更改Bootstrap 3下拉菜单上的单击行为。我基本上使用下拉列表作为一种特殊输入，用户可以在其中键入一个名称，然后提交。但是，如果他们单击输入文本字段，则会在键入任何内容之前关闭下拉列表目标是仅通过编程关闭下拉列表，尽管它仍然需要保持标准行为的数据切换属性以下是下拉列表的代码： <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle"

无法确定如何正确更改Bootstrap 3下拉菜单上的单击行为。我基本上使用下拉列表作为一种特殊输入，用户可以在其中键入一个名称，然后提交。但是，如果他们单击输入文本字段，则会在键入任何内容之前关闭下拉列表

目标是仅通过编程关闭下拉列表，尽管它仍然需要保持标准行为的

数据切换属性

以下是下拉列表的代码：
<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干预，完全重组，或者是否有一些我不知道的“选项”可以用于此。谢谢你的帮助
 您必须在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> 


带有输入字段的下拉列表


走！


$（'.下拉菜单'）。在（'单击'）上，函数（e）{
e、 停止传播（）
})
如何在不禁用“确认”对话框的情况下使用此选项？您是否找到了一个很好的解决方案？@alexw我将项目迁移到React.js，发现它解决了我的许多问题，我用不同的解决方案解决了此问题。明白了。我自己也在考虑前端框架，但我听说过很多关于性能的问题。@alexw我发现React.js在性能方面没有问题，我对此非常满意。它使用内存中的DOM在更新浏览器DOM之前计算更改。很方便。好的，我考虑一下。事实上，我听说过关于角度而不是反应的性能问题。看来这需要更多的研究。