<select>標籤不舉下拉

-2

裏面工作，我希望把引導下拉菜單裏選擇標籤。當我嘗試選擇任何選項時，選擇標籤會關閉。任何想法爲什麼會發生。我想這acieve<select>標籤不舉下拉

<div class="dropdown"> 
    <button class="btn btn-info editbtn" data-toggle="dropdown"> 
     <i class="fa fa-pencil" aria-hidden="true"></i></button> 
    <ul class="dropdown-menu"> 
     <li><label>Label</label><input class="form-control InputRequired" type="text"></li> 
     <li><label>Placeholder</label><input class="form-control InputRequired" type="text"></li> 
     <li><label>Type</label> 
      <select class="form-control"> 
       <option value="volvo">Volvo</option> 
       <option value="volvo">Volvo</option> 
       <option value="volvo">Volvo</option> 
       </select> 
      </li><br> 
     <button class="btn btn-info save">Save</button> 
     </ul> 
    </div> 
</div>

來源

2016-12-06 Abid

再加上工作小提琴，切實瞭解您的問題 – ScanQR

錯誤的做法完全。您沒有考慮到用戶體驗。通過這樣的層次結構已經確定，最好顯示二次集合。請參閱：http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3 –

@BradEvans我附上了一張圖片我如何通過不使用select內部下拉菜單來實現這一點？ – Abid

雖然你不應該使用一個下拉菜單，這樣，如果你絕對要做到這一點，你可以手動觸發下拉撥動自己。

下拉清除的原因是因爲click.bs.dropdown.data-api事件document正在觸發，因爲您單擊了select元素。

這可以通過在下拉菜單中沒有使用[data-toggle="dropdown"]選擇觸發避免。

缺點是您無法通過單擊下拉菜單外的關閉下拉菜單。當然，您可以隨時添加其他活動來關閉它，但這取決於您。

(function($, window, document) { 
 
    $("#dropdown").on("click", function() { 
 
    $(this).parent().toggleClass("open"); 
 
    }); 
 

 
    $("#dropdown-save").on("click", function() { 
 
    $(this).closest(".dropdown").removeClass("open"); 
 
    }); 
 
})(jQuery, window, document);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script> 
 
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> 
 

 
<div class="dropdown"> 
 
    <button id="dropdown" class="btn btn-primary dropdown-toggle" type="button">Dropdown Example 
 
    <span class="caret"></span> 
 
    </button> 
 
    <ul class="dropdown-menu"> 
 
    <li><a href="#">HTML</a></li> 
 
    <li><a href="#">CSS</a></li> 
 
    <li> 
 
     <label for="label">Label</label> 
 
     <input type="text" id="label"> 
 
    </li> 
 
    <li> 
 
     <select> 
 
     <option value="volvo">Volvo</option> 
 
     <option value="saab">Saab</option> 
 
     <option value="mercedes">Mercedes</option> 
 
     <option value="audi">Audi</option> 
 
     </select> 
 
    </li> 
 
    <li> 
 
     <button id="dropdown-save">Save</button> 
 
    </li> 
 
    </ul> 
 
</div>

來源

2016-12-06 07:16:23 josephting

<select>標籤不舉下拉

回答

相關問題