Trong hướng dẫn này, bạn sẽ học cách hiển thị và ẩn các phần tử bằng Bootstrap.
Bạn có thể sử dụng plugin JavaScript Bootstrap collapse để dễ dàng hiển thị và ẩn (hoặc mở rộng và thu gọn) các phần tử cụ thể trên một trang web.
Các nút và liên kết (tức là các phần tử <button>
và <a>
) thường được sử dụng làm trình kích hoạt được ánh xạ tới các phần tử bạn muốn chuyển đổi.
Bạn có thể hiển thị và ẩn các phần tử trong Bootstrap bằng cách nhấp vào button hoặc liên kết thông qua các thuộc tính data mà không cần viết bất kỳ mã JavaScript nào. Hãy thử một ví dụ và xem nó thực sự hoạt động như thế nào:
<!-- Trigger Buttons HTML -->
<a href="#myCollapse" data-bs-toggle="collapse">Toggle Element</a>
<button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#myCollapse">Toggle Element</button>
<!-- Collapsible Element HTML -->
<div class="collapse show" id="myCollapse">
<div class="card card-body">This is a simple example of showing and hiding specific element via data attributes. Click any trigger buttons to toggle this panel.</div>
</div>
Chúng tôi vừa tạo một điều khiển có thể thu gọn mà không cần viết bất kỳ mã JavaScript nào. Chà, chúng ta hãy lần lượt xem qua từng phần của đoạn mã này để hiểu rõ hơn.
Về cơ bản, plugin Bootstrap collapse yêu cầu hai phần tử hoạt động bình thường - phần tử kích hoạt như button hoặc siêu liên kết và bản thân phần tử có thể thu gọn.
data-bs-toggle="collapse"
được thêm vào phần tử kích hoạt hoặc bộ điều khiển cùng với một thuộc tính data-bs-target
(đối với các button) hoặc href
(đối với siêu liên kết) để tự động gán quyền kiểm soát một hoặc nhiều phần tử có thể thu gọn.data-bs-target
hoặc href
chấp nhận một bộ chọn CSS (chẳng hạn như bộ chọn id #myCollapse
trong ví dụ của chúng tôi) để áp dụng thu gọn cho một phần tử cụ thể..collapse
được thêm vào phần tử có thể thu gọn (dòng số 6)..show
(dòng số 6) vào phần tử có thể thu gọn ngoài lớp .collapse
để làm cho nó mở theo mặc định.Để làm cho các điều khiển có thể thu gọn hoạt động theo nhóm như menu accordion, bạn có thể sử dụng thành phần Bootstrap card. Xem hướng dẫn về Bootstrap accordion để tìm hiểu thêm về nó.
Bạn cũng có thể mở rộng và thu gọn các phần tử theo cách thủ công thông qua JavaScript - chỉ cần gọi phương thức collapse()
với bộ chọn id
hoặc class
của phần tử có thể thu gọn.
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myCollapse").collapse("toggle");
});
});
</script>
Có một số tùy chọn nhất định có thể được truyền cho phương thức collapse()
để tùy chỉnh chức năng của phần tử có thể thu gọn.
Tên | Kiểu | Giá trị mặc định | Mô tả |
---|---|---|---|
parent | selector | false | Tất cả các phần tử có thể thu gọn khác trong phần tử gốc được chỉ định sẽ bị đóng trong khi mục có thể thu gọn này được hiển thị trên lệnh gọi. |
toggle | boolean | true | Chuyển đổi phần tử có thể thu gọn khi gọi. |
Bạn cũng có thể đặt các tùy chọn này bằng cách sử dụng các thuộc tính data trên accordion - chỉ cần thêm tên tùy chọn vào data-bs-
như data-bs-parent="#myAccordion"
, data-bs-toggle="false"
.
Đây là các phương thức tiêu chuẩn của bootstrap collapse:
Bạn có thể truyền các tùy chọn cho collapse sử dụng đối tượng options.
Trong ví dụ sau, việc hiển thị phần tử có thể thu gọn sẽ không thể, bởi vì tùy chọn toggle
cho phần tử có thể thu gọn được đặt thành false
.
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myCollapse").collapse("toggle", {
toggle: false
});
});
});
</script>
Phương thức này bật / tắt (hiển thị hoặc ẩn) một phần tử có thể thu gọn.
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myCollapse").collapse("toggle");
});
});
</script>
Phương thức này hiển thị một phần tử có thể thu gọn.
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myCollapse").collapse("show");
});
});
</script>
Phương thức này ẩn một phần tử có thể thu gọn.
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myCollapse").collapse("hide");
});
});
</script>
Phương thức này hủy phần tử thu gọn (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() {
var myCollapse = bootstrap.Collapse.getInstance($("#myCollapse")[0]);
console.log(myCollapse);
// {_element: div#myCollapse.collapse.show, _isTransitioning: false, _config: {…}, _triggerArray: Array(2), _selector: "#myCollapse", …}
$("#myCollapse").collapse("dispose");
console.log(myCollapse);
// {_element: null, _isTransitioning: null, _config: null, _triggerArray: null, _selector: null, …}
});
});
</script>
Đây là một phương thức tĩnh cho phép bạn lấy instance của collapse được liên kết với một phần tử DOM.
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
var myCollapse = bootstrap.Collapse.getInstance($("#myCollapse")[0]);
console.log(myCollapse);
// {_element: div#myCollapse.collapse.show, _isTransitioning: false, _config: {…}, _triggerArray: Array(2), _selector: "#myCollapse", …}
});
});
</script>
Đây là một phương thức tĩnh cho phép bạn lấy instance của collapse được liên kết với phần tử DOM hoặc tạo một bản mới trong trường hợp bản thu gọn không được khởi chạy.
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
var myCollapse = bootstrap.Collapse.getOrCreateInstance($("#myCollapse")[0]);
console.log(myCollapse);
});
});
</script>
Mẹo: Các phương thức tĩnh không thể được gọi trên các instance của lớp (tức là các đối tượng). Chúng được gọi từ cấp lớp. Từ khóa static
được sử dụng để định nghĩa một phương thức tĩnh cho một lớp.
Lớp collapse của Bootstrap bao gồm một số sự kiện để kết nối vào chức năng thu gọn.
Sự kiện | Mô tả |
---|---|
show.bs.collapse | Sự kiện này kích hoạt ngay lập tức khi phương show được gọi. |
shown.bs.collapse | Sự kiện này được kích hoạt khi một phần tử thu gọn được hiển thị cho người dùng. Nó sẽ đợi cho đến khi quá trình chuyển đổi CSS hoàn tất trước khi bị kích hoạt. |
hide.bs.collapse | 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.collapse | Sự kiện này được kích hoạt khi một phần tử thu gọn đã bị ẩn khỏi người dùng. Nó sẽ đợi cho đến khi quá trình chuyển đổi CSS hoàn tất trước khi bị kích hoạt. |
Ví dụ sau đây hiển thị thông báo cảnh báo cho người dùng khi quá trình chuyển đổi của phần tử có thể thu gọn đã hoàn tất.
<script>
$(document).ready(function(){
$("#myCollapse").on("hidden.bs.collapse", function(){
alert("Collapsible element has been completely closed.");
});
});
</script>
Bạn có thể vui lòng tắt trình chặn quảng cáo ❤️ để hỗ trợ chúng tôi duy trì hoạt động của trang web.
Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần Bootstrap toast để tạo thông báo.
Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.
Trong hướng dẫn này, bạn sẽ học cách tạo gợi ý cho các trường đầu vào bằng Bootstrap typeahead.
Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.