Bootstrap

Bootstrap Dropdown

Posted on by ComdyVN

Bootstrap Dropdown

Trong hướng dẫn này, bạn sẽ học cách thêm menu thả xuống (dropdown menu) vào các thành phần Bootstrap khác nhau.

Tạo menu thả xuống với Bootstrap

Menu thả xuống thường được sử dụng bên trong thanh điều hướng ở đầu trang để hiển thị danh sách các liên kết có liên quan khi người dùng di chuột hoặc nhấp vào phần tử trình kích hoạt.

Bạn có thể sử dụng plugin Bootstrap dropdown để thêm menu thả xuống có thể chuyển đổi (tức là mở và đóng khi nhấp) vào hầu hết mọi thứ như liên kết, nút hoặc nhóm nút, thanh điều hướng, tab và nav, v.v. mà không cần viết một dòng mã JavaScript.

Thêm menu thả xuống thông qua các thuộc tính data

Bootstrap cung cấp một cơ chế dễ dàng và thanh lịch để thêm menu thả xuống vào một phần tử thông qua các thuộc tính data. Ví dụ sau đây sẽ cho bạn thấy mã tối thiểu cần thiết để thêm menu thả xuống vào siêu kết nối thông qua các thuộc tính data.

<div class="dropdown">
    <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown">Dropdown</a>
    <div class="dropdown-menu">
        <a href="#" class="dropdown-item">Action</a>
        <a href="#" class="dropdown-item">Another action</a>
    </div>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Thêm menu thả xuống thông qua các thuộc tính data

Ví dụ trên minh họa dạng cơ bản nhất của menu thả xuống Bootstrap. Hãy cùng tìm hiểu từng phần của thành phần Bootstrap dropdown.

Giải thích mã

Menu thả xuống Bootstrap về cơ bản có hai thành phần – phần tử kích hoạt có thể là một siêu liên kết hoặc nút và menu thả xuống.

  • Lớp .dropdown chỉ định một menu thả xuống.
  • Lớp .dropdown-toggle định nghĩa phần tử kích hoạt, là một siêu liên kết trong trường hợp của chúng tôi, trong khi thuộc tính data-bs-toggle="dropdown" được yêu cầu trên phần tử kích hoạt để chuyển đổi menu thả xuống.
  • Phần tử <div> với lớp .dropdown-menu sẽ xây dựng menu thả xuống thường chứa các liên kết hoặc hành động có liên quan.

Tương tự, bạn có thể thêm menu thả xuống cho các nút và thành phần điều hướng. Phần sau đây sẽ chỉ cho bạn một số cách triển khai phổ biến của menu thả xuống Bootstrap.

Tạo menu thả xuống trong Navbar

Các ví dụ sau đây sẽ chỉ cho bạn cách thêm menu thả xuống vào thanh điều hướng navbar.

<nav class="navbar navbar-expand-sm navbar-light bg-light">
    <div class="container-fluid">
        <a href="#" class="navbar-brand">Brand</a>
        <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="nav-item">
                    <a href="#" class="nav-link">Home</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Profile</a>
                </li>
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Messages</a>
                    <div class="dropdown-menu">
                        <a href="#" class="dropdown-item">Inbox</a>
                        <a href="#" class="dropdown-item">Drafts</a>
                        <a href="#" class="dropdown-item">Sent Items</a>
                        <div class="dropdown-divider"></div>
                        <a href="#"class="dropdown-item">Trash</a>
                    </div>
                </li>
            </ul>
            <ul class="nav navbar-nav ms-auto">
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Admin</a>
                    <div class="dropdown-menu dropdown-menu-end">
                        <a href="#" class="dropdown-item">Reports</a>
                        <a href="#" class="dropdown-item">Settings</a>
                        <div class="dropdown-divider"></div>
                        <a href="#" class="dropdown-item">Logout</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</nav>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo menu thả xuống trong Navbar

Mẹo: Bạn có thể vẽ một đường phân chia để tách các liên kết bên trong menu thả xuống bằng cách thêm lớp .dropdown-divider vào một phần tử trống <div>.

Tạo menu thả xuống trong Nav

Ví dụ sau đây sẽ chỉ cho bạn cách thêm menu thả xuống vào nav.

<ul class="nav nav-pills">
    <li class="nav-item">
        <a href="#" class="nav-link active">Home</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">Profile</a>
    </li>
    <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Messages</a>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Inbox</a>
            <a href="#" class="dropdown-item">Drafts</a>
            <a href="#" class="dropdown-item">Sent Items</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Trash</a>
        </div>
    </li>
    <li class="nav-item dropdown ms-auto">
        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Admin</a>
        <div class="dropdown-menu dropdown-menu-end">
            <a href="#" class="dropdown-item">Reports</a>
            <a href="#" class="dropdown-item">Settings</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Logout</a>
        </div>
    </li>
</ul>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo menu thả xuống trong Nav

Bạn có thể chuyển đổi ví dụ trên thành một tab thả xuống bằng cách chỉ cần thay thế lớp .nav-pills bằng .nav-tabs, mà không có bất kỳ thay đổi nào về mã.

Tạo menu thả xuống trong button

Các ví dụ sau đây sẽ cho bạn thấy cách thêm menu thả xuống vào một button.

<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Primary</button>
    <div class="dropdown-menu">
        <a href="#" class="dropdown-item">Action</a>
        <a href="#" class="dropdown-item">Another action</a>
        <div class="dropdown-divider"></div>
        <a href="#" class="dropdown-item">Separated link</a>
    </div>
</div>

Tương tự, bạn có thể thêm menu thả xuống cho các biến thể khác của button, như được hiển thị ở đây:

Tạo menu thả xuống trong button

Tạo menu thả xuống để tách các button

Ví dụ sau đây sẽ chỉ cho bạn cách thêm menu thả xuống để tách các button.

<div class="btn-group">
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
        <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
        <a href="#" class="dropdown-item">Action</a>
        <a href="#" class="dropdown-item">Another action</a>
        <div class="dropdown-divider"></div>
        <a href="#" class="dropdown-item">Separated link</a>
    </div>
</div>

Tương tự, bạn có thể thêm menu thả xuống cho các biến thể khác của button, như được hiển thị ở đây:

Tạo menu thả xuống để tách các button

Mẹo: Bạn có thể sử dụng các lớp định kích thước tương đối của Bootstrap như .btn-lg và .btn-sm trên phần tử .btn để thay đổi kích thước các button thả xuống.

Tạo menu thả xuống bên trong button group

Để tạo menu thả xuống bên trong một button group, chỉ cần đặt lớp .btn-group cùng với mã của menu thả xuống trong một .btn-group khác, như được hiển thị trong ví dụ sau:

<div class="btn-group">
    <button type="button" class="btn btn-primary">Button</button>
    <button type="button" class="btn btn-primary">Another Button</button>
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Action</a>
            <a href="#" class="dropdown-item">Another action</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Separated link</a>
        </div>
    </div>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo menu thả xuống bên trong button group

Tương tự, bạn có thể đặt menu thả xuống bên trong button group xếp chồng lên nhau theo chiều dọc, như thế này:

<div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">Button</button>
    <button type="button" class="btn btn-primary">Another Button</button>
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Action</a>
            <a href="#" class="dropdown-item">Another action</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Separated link</a>
        </div>
    </div>
</div>

Thay đổi vị trí của menu thả xuống

Bạn thậm chí có thể kích hoạt menu thả xuống ở trên, cũng như ở bên trái và bên phải của các phần tử bằng cách thêm một lớp bổ sung .dropup, .dropstart và .dropend tương ứng với phần tử cha (tức là phần tử .btn-group), như được hiển thị trong ví dụ sau.

<!-- Dropup menu -->
<div class="btn-group dropup">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Dropup</button>
    <div class="dropdown-menu">
        <a href="#" class="dropdown-item">Action</a>
        <a href="#" class="dropdown-item">Another action</a>
        <div class="dropdown-divider"></div>
        <a href="#" class="dropdown-item">Separated link</a>
    </div>
</div>

<!-- Dropleft menu -->
<div class="btn-group dropstart">

Kết quả của ví dụ trên sẽ giống như sau:

Thay đổi vị trí của menu thả xuống

Tạo menu thả xuống được căn bên phải

Theo mặc định, góc trên cùng bên trái của menu thả xuống được đặt ở góc dưới cùng bên trái của phần tử cha của nó, tức là 100% từ trên cùng và dọc theo bên trái. Để căn phải menu thả xuống, chỉ cần thêm một lớp bổ sung .dropdown-menu-end vào lớp .dropdown-menu cơ sở.

<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Right-aligned Dropdown Menu</button>
    <div class="dropdown-menu dropdown-menu-end">
        <a href="#" class="dropdown-item">Action</a>
        <a href="#" class="dropdown-item">Another action</a>
        <div class="dropdown-divider"></div>
        <a href="#" class="dropdown-item">Separated link</a>
    </div>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo menu thả xuống được căn bên phải

Thêm tiêu đề vào các mục của menu thả xuống

Bạn có thể tùy chọn thêm tiêu đề menu để gắn nhãn một phần cho các mục của menu bên trong menu thả xuống bằng cách thêm lớp .dropdown-header vào phần tử <div>, như sau:

<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Products</button>
    <div class="dropdown-menu">
        <div class="dropdown-header">ELECTRONICS</div>
        <a href="#" class="dropdown-item">Mobiles</a>
        <a href="#" class="dropdown-item">Tablets</a>
        <a href="#" class="dropdown-item">Laptops</a>
        <div class="dropdown-header">FASHION</div>
        <a href="#" class="dropdown-item">Clothing</a>
        <a href="#" class="dropdown-item">Sunglasses</a>
    </div>
</div>

Kết quả của ví dụ trên như sau:

Thêm tiêu đề vào các mục của menu thả xuống

Tắt các mục trong menu thả xuống

Bạn có thể áp dụng lớp .disabled cho các mục của menu thả xuống để làm cho chúng trông giống như bị vô hiệu hóa. Tuy nhiên, liên kết vẫn có thể nhấp được, để vô hiệu hóa điều này, bạn thường có thể xóa thuộc tính href của liên kết bằng cách sử dụng JavaScript hoặc thủ công.

<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Reports</button>
    <div class="dropdown-menu">
        <a href="#" class="dropdown-item">View</a>
        <a href="#" class="dropdown-item">Download</a>
        <a href="#" class="dropdown-item disabled" tabindex="-1">Edit / Delete</a>
    </div>
</div>

Kết quả của ví dụ trên như sau:

Tắt các mục trong menu thả xuống

Tạo menu thả xuống bằng JavaScript

Bạn cũng có thể tạo menu thả xuống theo cách thủ công bằng cách sử dụng JavaScript – chỉ cần gọi phương thức dropdown() với bộ chọn id hoặc class của phần tử liên kết hoặc button trong mã JavaScript của bạn.

<script>
$(document).ready(function(){
    $(".dropdown-toggle").dropdown();
});
</script>

Lưu ý: data-bs-toggle="dropdown" vẫn bắt buộc đối với phần tử kích hoạt của menu thả xuống bất kể bạn gọi menu thả xuống qua JavaScript hay thuộc tính data.

Các tùy chọn của menu thả xuống

Có một số tùy chọn nhất định có thể được truyền cho phương thức dropdown() để tùy chỉnh chức năng của menu thả xuống. Các tùy chọn có thể được truyền qua các thuộc tính data hoặc JavaScript.

Để thiết lập các tùy chọn cho menu thả xuống thông qua các thuộc tính data, chỉ cần thêm tên tùy chọn vào data-bs-, chẳng hạn như data-bs-display="static", v.v. Ngoài ra, khi truyền các tùy chọn thông qua các thuộc tính data, hãy đảm bảo thay đổi kiểu chữ hoa của tên tùy chọn từ camelCase thành kebab-case . Ví dụ, thay vì sử dụng data-bs-autoClose="false", hãy sử dụng data-bs-auto-close="false".

Tên Kiểu Giá trị mặc định Mô tả
boundary string | element ‘clippingParents’ Ranh giới ràng buộc tràn của menu thả xuống (chỉ áp dụng cho preventOverflow của Popper). Nó cũng có thể chấp nhận một tham chiếu HTMLElement (chỉ qua JavaScript).
reference string | element | object ‘toggle’ Phân tử tham chiếu của menu thả xuống. Chấp nhận các giá trị 'toggle', 'parent', một tham chiếu HTMLElement hoặc một đối tượng cung cấp getBoundingClientRect.
display string ‘dynamic’ Theo mặc định, Bootstrap sử dụng Popper để định vị động. Bạn có thể vô hiệu hóa điều này với 'static'.
offset array | string | function [0, 2] Chỉ định độ lệch vị trí của menu thả xuống so với ví trí ban đầu của nó. Bạn có thể truyền một chuỗi trong thuộc tính data với các giá trị được phân tách bằng dấu phẩy như:data-bs-offset="10,20".
autoClose boolean | string true

Cấu hình hành vi tự động đóng của menu thả xuống:

  • true – menu thả xuống sẽ bị đóng lại bằng cách nhấp vào bên ngoài hoặc bên trong menu thả xuống.
  • false – menu thả xuống sẽ được đóng lại bằng cách nhấp vào nút bật tắt và gọi phương thức hide hoặc toggle theo cách thủ công. Ngoài ra, menu thả xuống sẽ không bị đóng bằng cách nhấn phím esc.
  • 'inside' – menu thả xuống sẽ bị đóng (chỉ) bằng cách nhấp vào bên trong menu thả xuống.
  • 'outside' – menu thả xuống sẽ bị đóng (chỉ) bằng cách nhấp vào bên ngoài menu thả xuống.
popperConfig null | object | function null Cho phép bạn thay đổi cấu hình Popper mặc định của Bootstrap, xem cấu hình của Popper.

Xem tài liệu của Popper.js để biết thêm thông tin về các tùy chọn được đề cập ở trên.

Các phương thức của menu thả xuống

Đây là phương thức của menu thả xuống tiêu chuẩn của bootstrap:

toggle

Phương thức này chuyển đổi menu thả xuống của điều hướng theo tab hoặc thanh điều hướng.

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myDropdown").dropdown("toggle");
    });
});
</script>

show

Phương thức này hiển thị menu thả xuống của điều hướng theo tab hoặc thanh điều hướng.

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myDropdown").dropdown("show");
    });
});
</script>

hide

Phương thức này ẩn menu thả xuống của điều hướng theo tab hoặc thanh điều hướng.

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myDropdown").dropdown("hide");
    });
});
</script>

update

Phương thức này cập nhật vị trí của menu thả xuống của một phần tử.

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myDropdown").dropdown("update");
    });
});
</script>

dispose

Phương thức này hủy menu thả xuống của một phần tử (tức là loại bỏ dữ liệu được lưu trữ trên phần tử DOM).

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myDropdown").dropdown("dispose");
    });
});
</script>

getInstance

Đây là một phương thức tĩnh cho phép bạn lấy instance của menu thả xuống được liên kết với một phần tử DOM.

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        var myDropdown = bootstrap.Dropdown.getInstance($("#myDropdown")[0]);
        console.log(myDropdown);
        // {_element: button#myDropdown.btn.btn-primary.dropdown-toggle, _popper: {…}, _config: {…}, _menu: div.dropdown-menu, _inNavbar: false}
    });
});
</script>

getOrCreateInstance

Đây là một phương thức tĩnh cho phép bạn lấy instance của menu thả xuống được liên kết với một phần tử DOM hoặc tạo một instance mới trong trường hợp menu thả xuống không được khởi chạy.

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        var myDropdown = bootstrap.Dropdown.getOrCreateInstance($("#myDropdown")[0]);
        console.log(myDropdown);
        // {_element: button#myDropdown.btn.btn-primary.dropdown-toggle, _popper: null, _config: {…}, _menu: div.dropdown-menu, _inNavbar: false}
    });
});
</script>

Các sự kiện của menu thả xuống

Đây là các sự kiện Bootstrap tiêu chuẩn để xử lý chức năng của menu thả xuống.

Tất cả các sự kiện của menu thả xuống được kích hoạt tại phần tử kích hoạt và sau đó hiện lên. Vì vậy, bạn cũng có thể thêm trình lắng nghe sự kiện trên phần tử cha của .dropdown-menu. Ngoài ra, bạn có thể sử dụng event.relatedTarget để nhắm mục tiêu phần tử liên kết chuyển đổi.

Sự kiện Mô tả
show.bs.dropdown Sự kiện này kích hoạt ngay lập tức khi phương thức show được gọi.
shown.bs.dropdown Sự kiện này được kích hoạt khi menu thả xuống hiển thị cho người dùng và quá trình chuyển đổi CSS đã hoàn tất.
hide.bs.dropdown Sự kiện này được kích hoạt ngay lập tức khi phương thức hide được gọi.
hidden.bs.dropdown Sự kiện này được kích hoạt khi menu thả xuống bị ẩn khỏi người dùng và quá trình chuyển đổi CSS đã hoàn tất.

Ví dụ sau đây hiển thị nội dung văn bản của liên kết thả xuống khi người dùng nhấp vào nó.

<script>
$(document).ready(function(){
    $(".dropdown").on("show.bs.dropdown", function(e){
        var linkText = $(e.relatedTarget).text(); // Get the link text
        alert("Click on OK button to view the dropdown menu for - " + linkText);
    });
});
</script>

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *