Trình đơn khởi động/thiết bị nhỏ của Twitter Bootstrap: menu đóng/thu gọn khi nhấp vào một mục menu

Question

Tôi muốn thay đổi hành vi của Menu Khởi động Twitter trên các thiết bị nhỏ để đóng menu mở rộng bằng cách nhấp vào mục menu hoặc nhấp vào menu nút. Hiện tại (mặc định) tôi chỉ có thể thu gọn nó bằng cách nhấp vào nút menu ở góc trên cùng bên phải, cho dù tôi có nhấp vào liên kết/mục menu hay không. Tôi sẽ làm như thế nào? Tôi không tìm ra từ tài liệu TB và tìm kiếm trên internet không cung cấp bất kỳ câu trả lời nào.

Answer 1

Bạn có thể thử một cái gì đó giống như ..

$('.nav li a').on('click',function(){ 
    $('.nav-collapse').collapse('hide'); 
}) 

này sẽ làm việc cho các liên kết menu đang tham chiếu '#'. Trình đơn đã bị thu gọn nếu trình đơn của bạn liên kết điều hướng đến một trang khác trên trang web vì điều này sẽ làm cho toàn bộ trang được làm mới.

Answer 2

Cảm ơn bạn đã sửa Skelly. Nó hoạt động tốt trên menu "di động", nhưng tiếc là nó đã gây ra lỗi khiếm khuyết trong chế độ "máy tính để bàn" vì nó đang nhắm mục tiêu .nav-collapse và lớp này hoạt động ở cả hai chế độ. Vì vậy, tôi đã thực hiện một sửa đổi nhỏ:

$('.nav li a').on('click',function(){ 
    $('.navbar-collapse.in').collapse('hide'); 
}) 

Sửa đổi này sẽ chỉ gọi chức năng 'ẩn' khi menu ở chế độ "di động".

Lưu ý: Đây chỉ thử nghiệm trên Bootstrap 3.

Answer 3

Bạn có thể làm điều đó bằng cách sử dụng HTML, thêm data-toggle="collapse" data-target=".in" để neo

Ví dụ:

<li><a href="#" data-toggle="collapse" data-target=".in">Link</a></li>