Source : Bootstrap collapsed div not closing when clicking a new link for another toggle.
Nativement, le composant Collapse de Bootstrap ne permet pas de fermer l’élément ouvert au click sur un autre élément. Il se contente d’ouvrir et de fermer l’élément lié au lien ou au bouton au click sur celui-ci.
Utiliser ce code :
|
1 |
$('.nav a').click(function () { $(".navbar-to-collapse").collapse("hide") }); |
You can change .nav a and .navbar-to-collapse with your desired variable or add to them more variable simply by using < , > between each variable.
More explanation :
.nav ais the variable that you target by your click and in this example it’s a link under a nav class, you can modify it to target a link using ID not class$('#nav a').navbar-to-collapseis the value fordata-target=".navbar-to-collapse"and you can modify it to the data-target you use.
So a complete example (for illustrating ) should be like that:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<header><!-- /Navigation-Bar Container--> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-to-collapse"> <span class="sr-only">Toggle navigation</span> <i class="icon-menu"></i> </button> </div> <div class="collapse navbar-collapse navbar-to-collapse"> <ul class="nav"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </div><!-- /.navbar-collapse --> </div> </nav> |
|
1 |
$('.nav a').click(function () { $(".navbar-to-collapse").collapse("hide") }); |