Bootstrap: Menu sổ xuống dropdown.js

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
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…
})
» Tiếp: ScrollSpy scrollspy.js
« Trước: Modals modal.js
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!