Question

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

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

dropdown with text field

以下是下拉列表的代码：

<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干预，完全重组，或者如果有一些“选项”我不知道我可以用于此。感谢帮助！

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

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

1 个答案: