Trình đơn thả xuống JS của Bootstrap
thả xuống JS (dropdown.js)
Menu thả xuống là một menu có thể chuyển đổi cho phép người dùng chọn một giá trị từ danh sách được xác định trước.
Để biết hướng dẫn về Dropdowns, hãy đọc Hướng dẫn thả xuống Bootstrap của chúng tôi.
Các lớp plugin thả xuống
| Class | Description | Example |
|---|---|---|
| .dropdown | Indicates a dropdown menu | Try it |
| .dropdown-menu | Builds the dropdown menu | Try it |
| .dropdown-menu-right | Right-aligns a dropdown menu | Try it |
| .dropdown-header | Adds a header inside the dropdown menu | Try it |
| .dropup | Indicates a dropup menu | Try it |
| .disabled | Disables an item in the dropdown menu | Try it |
| .divider | Separates items inside the dropdown menu with a horizontal line | Try it |
Thông qua thuộc tính data-*
Thêm data-toggle="dropdown" vào một liên kết hoặc một nút để chuyển đổi menu thả xuống.
Ví dụ
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">Dropdown Example</a>
Hãy tự mình thử »Thông qua JavaScript
Kích hoạt thủ công với:
Lưu ý: Thuộc tính data-toggle="dropdown" là bắt buộc bất kể bạn có gọi phương thức dropdown() hay không.
Tùy chọn thả xuống
| None |
Phương pháp thả xuống
Bảng sau liệt kê tất cả các phương pháp thả xuống có sẵn.
| Method | Description | Try it |
|---|---|---|
| .dropdown("toggle") | Toggles the dropdown | Try it |
Sự kiện thả xuống
Bảng sau liệt kê tất cả các sự kiện thả xuống có sẵn.
| Event | Description | Try it |
|---|---|---|
| show.bs.dropdown | Occurs when the dropdown is about to be shown. | Try it |
| shown.bs.dropdown | Occurs when the dropdown is fully shown (after CSS transitions have completed) | Try it |
| hide.bs.dropdown | Occurs when the dropdown is about to be hidden | Try it |
| hidden.bs.dropdown | Occurs when the dropdown is fully hidden (after CSS transitions have completed) | Try it |
Mẹo: Sử dụng sự kiện. có liên quanTarget của jQuery để lấy phần tử đã kích hoạt danh sách thả xuống:
Ví dụ
$(".dropdown").on("show.bs.dropdown", function(event){
var x = $(event.relatedTarget).text(); // Get the text of the element
alert(x);
}); Hãy tự mình thử »Thêm ví dụ
Thay đổi biểu tượng dấu mũ lộn ngược
Ví dụ sau thay đổi biểu tượng dấu mũ từ hướng xuống dưới thành hướng lên trên khi nhấp vào danh sách thả xuống:
Ví dụ
/* CSS: */
<style>
.caret.caret-up {
border-top-width: 0;
border-bottom: 4px solid #fff;
}
</style>
/* JS: */
<script>
$(document).ready(function(){
$(".dropdown").on("hide.bs.dropdown", function(){
$(".btn").html('Dropdown <span class="caret"></span>');
});
$(".dropdown").on("show.bs.dropdown", function(){
$(".btn").html('Dropdown <span class="caret caret-up"></span>');
});
});
</script> Hãy tự mình thử »Thanh điều hướng có thả xuống
Ví dụ sau thêm menu thả xuống cho một nút trên thanh điều hướng:
Ví dụ
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav> Hãy tự mình thử »Ví dụ sau thêm menu thả xuống có biểu mẫu đăng nhập vào thanh điều hướng:
Ví dụ
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Login <span class="glyphicon glyphicon-log-in"></span></a>
<div class="dropdown-menu">
<form id="formlogin" class="form container-fluid">
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<button type="button" id="btnLogin" class="btn btn-block">Login</button>
</form>
<div class="container-fluid">
<a class="small" href="#">Forgot password?</a>
</div>
</div>
</li>
</ul> Hãy tự mình thử »Menu thả xuống đa cấp
Trong ví dụ này, chúng tôi sử dụng jQuery để mở danh sách thả xuống nhiều cấp khi nhấp chuột:
Ví dụ
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script> Hãy tự mình thử » Trong ví dụ này, chúng tôi đã tạo một lớp .dropdown-submenu tùy chỉnh cho danh sách thả xuống nhiều cấp:
Ví dụ
/* CSS: */
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
</style>
/* JS: */
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script> Hãy tự mình thử »