Twitter Bootstrap menu responsywne/małe urządzenia: zamknij/zwiń menu klikając pozycję menu

Question

Chcę zmienić zachowanie menu Bootstrap na Twitterze na małych urządzeniach, aby zamknąć rozwinięte menu klikając element menu lub klikając menu przycisk. Obecnie (domyślnie) mogę go zwinąć, klikając przycisk menu w prawym górnym rogu, niezależnie od tego, czy kliknąłem link/element menu, czy nie. Jak to zrobić? Nie mogę tego zrozumieć z dokumentacji TB i przeszukiwanie Internetu nie dało żadnych odpowiedzi.

Answer 1

Można spróbować czegoś podobnego ..

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

To będzie pracować dla linków menu, które odwołują '#'. Menu powinno już się zwijać, jeśli linki do menu prowadzą do innej strony w witrynie, ponieważ spowoduje to pełne odświeżenie strony.

Answer 2

Dzięki za naprawioną Skelly. Udało się to świetnie w menu "mobilnym", ale niestety spowodowało to wadę wizualną w trybie "pulpitu", ponieważ było ukierunkowane na .nav-collapse, a ta klasa jest aktywna w obu trybach. Tak, zrobiłem lekką modyfikację:

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

Modyfikacja ta powoływania tylko „hide” funkcjonalność, gdy menu jest w trybie „mobile”.

Uwaga: To jest testowany tylko na Bootstrap 3.

Answer 3

Można to zrobić za pomocą HTML, dodać data-toggle="collapse" data-target=".in" zakotwiczyć

Przykład:

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