更改Bootstrap3下拉菜單上的點擊行爲

無法弄清楚如何正確更改Bootstrap 3下拉菜單上的點擊行爲。我基本上使用下拉菜單作爲臨時輸入，用戶可以輸入名稱然後提交。但是，如果他們點擊輸入文本字段，則會在輸入任何內容之前關閉下拉菜單。更改Bootstrap3下拉菜單上的點擊行爲

目標是僅編程方式關閉下拉菜單，但仍需要持續標準行爲的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干預，重組這個完全，或者是否有一些「選項」我不不知道我可以用這個。感謝幫助！

來源

2014-02-15 crockpotveggies

你有沒有找到一個好的解決方案呢？ – alexw

@alexw我將項目遷移到了React.js，發現它解決了我的許多問題，並用不同的解決方案解決了這個問題。 – crockpotveggies

Gotcha。我自己正在考慮前端框架，但我聽到很多關於性能問題的信息。 – alexw

您必須在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>

來源

2014-02-15 07:05:18 Karthikeyan

如何在不禁用「確認」對話框的情況下使用它？ – Gcap

更改Bootstrap3下拉菜單上的點擊行爲

回答

相關問題