Twitter的引導下拉菜單無法正常工作

我使用下面的代碼，以提供與選項按鈕，用戶可以選擇：Twitter的引導下拉菜單無法正常工作

<div class="row"> 
<div class="dropdown col-md-6"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
     Employee Privilege 
     <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
     <li><a href="#">HR</a></li> 
     <li role="separator" class="divider"></li> 
     <li><a href="#">Admin</a></li> 
     <li role="separator" class="divider"></li> 
     <li><a href="#">Employee</a></li> 
    </ul> 
    </div> 
</div> 
</div>

的問題是，選擇「員工權限」沒有按」在我選擇下拉菜單中的其中一個選項後，系統將會更改。

我在這裏做錯了什麼？

來源

2016-11-29 Behrouz Riahi

你沒有做錯任何事。這是Bootstrap下拉菜單的正常行爲，它通常用作導航菜單而不是值的輸入。我認爲bootstrap-select會符合您的需求

$('.selectpicker').selectpicker({ 
 
    style: 'btn-info', 
 
    size: 4 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title></title> 
 

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

 
    <!-- Latest compiled and minified JavaScript --> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.min.js"></script> 
 

 

 
</head> 
 

 
<body> 
 

 
    <select class="selectpicker"> 
 
    <option>Mustard</option> 
 
    <option>Ketchup</option> 
 
    <option>Relish</option> 
 
    </select> 
 
</body> 
 

 
</html>

來源

2016-11-29 02:18:54 Khang

Twitter的引導下拉菜單無法正常工作

回答

相關問題