Trình đơn thả xuống JS của Bootstrap
Các lớp CSS thả xuống
Để 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.
Class | Description | Example |
---|---|---|
.dropdown |
Indicates a dropdown menu | Try it |
.dropdown-item |
Style links inside the dropdown menu with proper padding etc | Try it |
.dropdown-item-text |
Style text or text links inside the dropdown menu with proper padding etc | 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 |
.active |
Styles the active element in a 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ụ
<button type="button" class="dropdown-toggle"
data-toggle="dropdown">Dropdown Example</button>
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. If set, it will open the dropdown menu by default | Try it |
.dropdown("update") | Updates the position of an element's dropdown | |
.dropdown("dispose") | Destroys an element's dropdown |
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ử »