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>

的问题是，选择“员工权限”没有按”在我选择下拉菜单中的其中一个选项后，系统将会更改。

我在这里做错了什么？

答

你没有做错任何事。这是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>

Twitter的引导下拉菜单无法正常工作

相关推荐