Bootstrap: Menu sổ xuống dropdown.js
Giải phóng thời gian, khai phóng năng lực
Các ví dụ
Bạn có thể thêm menu sổ xuống chỉ với một plugin rất đơn giản.
Menu sổ xuống nằm bên trong thanh điều hướng
Menu sổ xuống nằm bên trong trình đơn dạng viên thuốc (pill)
Cách sử dụng
Bạn có thể sử dụng thông qua các thuộc tính dữ liệu hoặc JavaScript, Plugin sổ xuống sẽ hiển thị nội dung ẩn (menu sổ xuống) bằng cách kích hoạt class .open
trên phần tử cha. Khi đã được mở ra, plugin sẽ thêm .dropdown-backdrop
để tạo ra một vùng mà khi bạn click vào đó (bên ngoài menu sổ xuống) thì menu sổ xuống sẽ ẩn đi. Lưu ý: Thuộc tính data-toggle=dropdown
được sử dụng để đóng menu sổ xuống ở mức ứng dụng, vì thế hãy luôn sử dụng nó khi có thể.
Thông qua các thuộc tính dữ liệu
Thêm data-toggle="dropdown"
vào một liên kết hoặc một nút để đóng/mở menu sổ xuống.
<div class="dropdown">
<a data-toggle="dropdown" href="#">Kích hoạt menu sổ xuống</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
</div>
Để giữ đường dẫn nguyên vẹn, hãy sử dụng thuộc tính data-target
thay vì href="#"
.
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
</div>
Thông qua JavaScript
Đóng/mở menu sổ xuống bằng JavaScript:
$('.dropdown-toggle').dropdown()
Yêu cầu data-toggle="dropdown"
Bất kể bạn gọi menu sổ xuống bằng JavaScript hay data-api, data-toggle="dropdown"
luôn luôn được yêu cầu để hiển thị phần tử kích hoạt menu sổ xuống.
Các tùy chọn
Không có tùy chọn nào
Các phương thúc
$().dropdown('toggle')
Đóng/mở menu sổ xuống.
Các sự kiện
Toàn bộ các sự kiện được kích hoạt tại phần tử cha của .dropdown-menu
.
Loại sự kiện | Mô tả |
---|---|
show.bs.dropdown | Sự kiện này xảy ra ngay khi phương thức show được gọi. Phần tử kích hoạt đóng/mở sẽ giống như thuộc tính relatedTarget của sự kiện. |
shown.bs.dropdown | Sự kiện này xảy ra ngay khi menu sổ xuống hiển thị (đang đợi CSS transition kết thúc). Phần tử kích hoạt đóng/mở sẽ giống như thuộc tính relatedTarget của sự kiện. |
hide.bs.dropdown | Sự kiện này xảy ra ngay khi phương thức hide được gọi. Phần tử kích hoạt đóng/mở sẽ giống như thuộc tính relatedTarget của sự kiện. |
hidden.bs.dropdown | Sự kiện này xảy ra khi menu sổ xuống ẩn đi hoàn toàn (đang đợi CSS transition kết thúc). Phần tử kích hoạt đóng/mở sẽ giống như thuộc tính relatedTarget của sự kiện. |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something…
})
Giải phóng thời gian, khai phóng năng lực