Cacher Twitter Bootstrap nav collapse on click
Ce n'est pas un menu déroulant, la catégorie est la classe li comme dans l'image:
En sélectionnant une catégorie dans le menu réactif (le modèle ne fait que Une page), je souhaite masquer automatiquement la navigation en réduisant lorsque je clique sur ..__ Promenez-vous également à utiliser comme navigation, car le modèle n'a qu'un seul page. Je cherche une solution qui ne l’affecte pas, voici le code HTML de menu:
<!-- NAVBAR
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Carousel Demo</a>
<div class="nav-collapse">
<ul class="nav" >
<li class="active"><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
<!-- dropdown -->
</ul>
<!-- /.nav -->
</div>
<!--/.nav-collapse -->
</div>
<!-- /.container -->
</div>
<!-- /.navbar-inner -->
</div>
<!-- /.navbar -->
essaye ça:
$('.nav a').on('click', function(){
$('.btn-navbar').click(); //bootstrap 2.x
$('.navbar-toggle').click(); //bootstrap 3.x by Richard
$('.navbar-toggler').click(); //bootstrap 4.x
});
Je viens de répliquer les 2 attributs du btn-navbar (data-toggle="collapse" data-target=".nav-collapse.in") sur chaque lien comme ceci:
<div class="nav-collapse">
<ul class="nav" >
<li class="active"><a href="#home" data-toggle="collapse" data-target=".nav-collapse.in">Home</a></li>
<li><a href="#about" data-toggle="collapse" data-target=".nav-collapse.in">About</a></li>
<li><a href="#portfolio" data-toggle="collapse" data-target=".nav-collapse.in">Portfolio</a></li>
<li><a href="#services" data-toggle="collapse" data-target=".nav-collapse.in">Services</a></li>
<li><a href="#contact" data-toggle="collapse" data-target=".nav-collapse.in">Contact</a></li>
</ul>
</div>
Dans la barre de navigation Bootstrap 4 , in a été remplacé par show et la syntaxe serait la suivante:
data-toggle="collapse" data-target=".navbar-collapse.show"
$(function() {
$('.nav a').on('click', function(){
if($('.navbar-toggle').css('display') !='none'){
$('.navbar-toggle').trigger( "click" );
}
});
});
Mieux vaut utiliser les méthodes default collapse.js :
$('.nav a').click(function(){
$('.nav-collapse').collapse('hide');
});
Encore plus élégant sans une simple copie de code, appliquez simplement les attributs data-toggle="collapse" et data-target=".nav-collapse" à la navigation elle-même:
<nav class="nav-collapse" data-toggle="collapse" data-target=".nav-collapse">
<ul class="nav">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
Super propre, pas de JavaScript requis. Fonctionne très bien, tant que vos éléments nav a disposent de suffisamment de rembourrage pour les gros doigts et que vous n'empêchez pas le clic de se produire par l'intermédiaire de e.stopPropagation() lorsque les utilisateurs cliquent sur les éléments nav a.
Mettez à jour votre
<li>
<a href="#about">About</a>
</li>
à
<li>
<a data-toggle="collapse" data-target=".nav-collapse" href="#about">About</a>
</li>
Ce simple changement a fonctionné pour moi.
Testé sur Bootstrap 3.3.6 - le travail!
$('.nav a').click(function () {
$('.navbar-collapse').collapse('hide');
});La navigation doit être fermée chaque fois qu'un utilisateur clique n'importe où sur le corps - pas seulement les éléments de navigation. Dites que le menu est ouvert, mais que l'utilisateur clique dans le corps de la page. L'utilisateur s'attend à voir le menu fermer.
Vous devez également vous assurer que le bouton bascule est visible, sinon un saut apparaît dans le menu.
$(document).ready(function() {
$("body").click(function(event) {
// only do this if navigation is visible, otherwise you see jump in navigation while collapse() is called
if ($(".navbar-collapse").is(":visible") && $(".navbar-toggle").is(":visible") ) {
$('.navbar-collapse').collapse('toggle');
}
});
});
Essayez ceci> Bootstrap 3
Brillant exactement ce que je cherchais, mais j’ai eu quelques heurts avec le javascript et le modal bootstrap, cela a réglé le problème.
$(function() {
$('.navbar-nav').on('click', function(){
if($('.navbar-header .navbar-toggle').css('display') !='none'){
$(".navbar-header .navbar-toggle").trigger( "click" );
}
});
});
J'espère que cela t'aides.
$('.nav a').click(function () {
$('.navbar-collapse').collapse('hide');
});Cela a bien fonctionné pour moi. C'est la même chose que la réponse acceptée, mais le problème lié à la vue Bureau/tablette est résolu.
$('.navbar-nav a').on('click', function () {
if (window.innerWidth <= 768) {
$(".navbar-toggle").click();
}
});Je pense qu'il est préférable d'utiliser les méthodes collapse.js par défaut de Bootstrap 3 en utilisant le .navbar-collapse comme élément réductible que vous souhaitez masquer, comme indiqué ci-dessous.
D’autres solutions peuvent causer d’autres problèmes indésirables liés à l’affichage ou au fonctionnement des éléments dans votre page Web. Par conséquent, même si certaines solutions peuvent sembler résoudre votre problème initial, elles peuvent en présenter d’autres, alors assurez-vous d’exécuter des tests approfondis de votre site après toute correction.
Pour voir ce code en action:
- Appuyez sur "Exécuter cet extrait de code" ci-dessous.
- Appuyez sur le bouton "Full Page".
- Échelle de la fenêtre jusqu'à l'activation de la liste déroulante.
- Ensuite, sélectionnez une option de menu et le tour est joué!
À votre santé!
$('.nav a').click(function() {
$('.navbar-collapse').collapse('hide');
});<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="author" content="Franciscus Agnew">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap Navbar Collapse Function</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-expanded="navbar"><span class="sr-only">Toggle navigation</span>Menu <span class="glyphicon glyphicon-chevron-down"></span></button>
<a class="navbar-brand" href="#">Brand Logo</a>
</div><!-- navbar-header -->
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#staff">Staff</a></li>
<li><a href="#contact">Contact</a></li>
</ul><!-- navbar-right -->
</div><!-- navbar-collapse -->
</div><!-- container -->
</nav><!-- navbar-fixed-top -->
</header>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- Custom Navbar Collapse Script Solution -->
<script>
$('.nav a').click(function() {
$('.navbar-collapse').collapse('hide');
});
</script>
</body>
</html>Dans chaque lien déroulant, mettez data-toggle = "collapse" et data-target = ". Nav-collapse", où nav-collapse est le nom que vous donnez à la liste déroulante.
<ul class="nav" >
<li class="active"><a href="#home">Home</a></li>
<li><a href="#about" data-toggle="collapse" data-target=".nav-collapse">About</a></li>
<li><a href="#portfolio" data-toggle="collapse" data-target=".nav-collapse">Portfolio</a></li>
<li><a href="#services" data-toggle="collapse" data-target="nav-collapse">Services</a></li>
<li><a href="#contact" data-toggle="collapse" data-target=".nav-collapse">Contact</a></li>
<!-- dropdown -->
</ul>
Cela fonctionne parfaitement sur les écrans qui ont une liste déroulante comme les écrans mobiles, mais sur le bureau et la tablette, cela crée un flickr. En effet, la classe .collapsing est appliquée. Pour supprimer le flickr, j'ai créé une requête multimédia et inséré un débordement masqué dans la classe en cours de réduction.
@media (min-width: 768px) {
.collapsing {
overflow: inherit;
}
}
L'ajout de data-toggle = "collapse" data-target = ". Navbar-collapse.in" à la balise <a> a fonctionné pour moi.
<div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a
href="#" data-toggle="collapse" data-target=".navbar-collapse.in" class="nav-link" >Home
</a></li>
</ul>
</div>
Voici comment je l'ai fait. S'il y a une manière plus douce, s'il vous plaît dites-moi s'il vous plaît.
Dans les balises <a> où se trouvent les liens pour le menu, j'ai ajouté ce code:
onclick="$('.navbar-toggle').click()"
Il préserve l'animation de la diapositive. Donc, en plein usage, cela ressemblerait à ceci:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" ng-controller="topNavController as topNav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="home.html">My Cool Site</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active" onclick="$('.navbar-toggle').click()"><a href="home.html" onclick="$('.navbar-toggle').click()"><i class="fa fa-home"></i> Home</a></li>
<li><a href="aboutus.html" onclick="$('.navbar-toggle').click()">About Us</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
C'est la meilleure solution que j'ai utilisée.
$(document).ready(function () {
$('.nav a').on('click', function () {
if ($(".btn-navbar").is(":visible") ){ $(".btn-navbar").trigger("click"); } //bootstrap 2.x
if ($(".navbar-toggle").is(":visible")) { $(".navbar-toggle").trigger("click"); } //bootstrap 3.x
});
});
$("body,.nav a").click(function (event) {
// only do this if navigation is visible, otherwise you see jump in
//navigation while collapse() iS called
if ($(".navbar-collapse").is(":visible") && $(".navbar-toggle").is(":visible")) {
$('.navbar-collapse').collapse('toggle');
}
});
Pour ceux qui ont remarqué des barres de navigation de bureau clignotent lors de l’utilisation de cette solution:
$('.nav a').on('click', function(){
$(".navbar-collapse").collapse('hide');
});
Une solution simple à ce problème consiste à référencer la barre de navigation réduite en vérifiant la présence de 'in':
$('.navbar-collapse .nav a').on('click', function(){
if($('.navbar-collapse').hasClass('in'))
{
$(".navbar-collapse").collapse('hide');
}
});
Cela réduit la barre de navigation au clic lorsque la barre de navigation est en mode mobile, mais laissera la version de bureau seule. Cela évite le scintillement observé par de nombreuses personnes sur les versions de bureau.
De plus, si vous avez une barre de navigation avec menus déroulants vous ne pourrez pas les voir car la barre de navigation sera masquée dès que vous cliquez dessus, donc si vous avez des menus déroulants (comme moi!), utilisez le suivant:
$('.nav a').on('click', function(e){
if(!$(this).closest('li').hasClass('dropdown') & $( '.navbar-collapse').hasClass('in'))
{
$(".navbar-collapse").collapse('hide');
}
});
Ceci recherche la présence de la classe déroulante au-dessus du lien cliqué dans le DOM. S'il existait, le lien avait pour but de lancer un menu déroulant et par conséquent, le menu n'est pas masqué. Lorsque vous cliquez sur un lien dans le menu déroulant, la barre de navigation se cache correctement.
$(function() {
$('.nav a').on('click touchstart', function(){
if($('.navbar-toggle').css('display') !='none'){
$(".navbar-toggle").trigger( "click" );
}
});
});
// NOTE J'ai ajouté le "touchstart" pour mobile touch. touchstart/end n'a pas de retard
100% de travail: -
Ajouter en HTML
<div id="myMenu" class="nav-collapse">
Javascript
$(function(){
var navMain = $("#myMenu");
navMain.on("click", "a", null, function () {
navMain.collapse('hide');
});
});
Une autre solution rapide pour Bootstrap 3. * pourrait être:
$( document ).ready(function() {
//
// Hide collapsed menu on click
//
$('.nav a').each(function (idx, obj) {
var selected = $(obj);
selected.on('click', function() {
if (selected.closest('.collapse.in').length > 0) {
$('.navbar-toggle').click(); //bootstrap 3.x by Richard
}
});
});
});
Je suis sur Bootstrap 4, j'utilise fullPage.js avec une navigation supérieure fixe et j'essaie tout ce qui est indiqué ici, avec des résultats mitigés.
J'ai essayé le meilleur moyen, propre:
data-toggle="collapse" data-target=".navbar-collapse.show"Le menu s'effondrerait, mais les liens href ne mèneraient nulle part.
Essayé les autres moyens logiques:
$('myClickableElements').on('click touchstart', function(){ $(".navbar-collapse.show").collapse('hide'); // or $(".navbar-collapse.show").collapse('toggle'); // or $('.navbar-toggler').click() });Il y aurait un comportement étrange à cause de l'événement touchstart: les boutons cliqués finiraient par ne pas être ceux sur lesquels j'ai cliqué, rompant ainsi les liens . , causant des trucs plus étranges.
- Essayé de changer div en li
- Essayé de e.preventDefault () et e.stopPropagation ()
- Essayé et essayé plus
Rien ne marcherait.
Donc, au lieu de cela, j'ai eu la merveilleuse idée (jusqu'à présent) de le faire:
$(window).on('hashchange',function(){
$(".navbar-collapse.show").collapse('hide');
});
J'ai déjà eu des trucs dans cette fonction hashchange, si je devais juste ajouter cette ligne.
En réalité, il fait exactement ce que je veux: réduire le menu lorsque le hachage est modifié (c’est-à-dire qu’un clic a eu lieu ailleurs). Ce qui est bon, car je peux maintenant avoir des liens dans mon menu qui ne le réduiront pas.
Qui sait, peut-être que cela aidera quelqu'un dans ma situation!
Et merci à tous ceux qui ont participé à ce fil, beaucoup d’informations à apprendre ici.
Ajouter un identifiant puis à chacun
<li> add data-target="myMenu" data-toggle="collapse"
<div id="myMenu" class="nav-collapse">
<ul class="nav">
<li class="active" data-target="myMenu" data-toggle="collapse"><a href="#home">Home</a></li>
<li data-target="myMenu" data-toggle="collapse"><a href="#about">About</a></li>
<li data-target="myMenu" data-toggle="collapse"><a href="#portfolio">Portfolio</a></li>
<li data-target="myMenu" data-toggle="collapse"><a href="#services">Services</a></li>
<li data-target="myMenu" data-toggle="collapse"><a href="#contact">Contact</a></li>
</ul>
</div>
Dans la plupart des cas, vous ne voudrez appeler la fonction de basculement que si le bouton de basculement est visible ...
if ($('.navbar-toggler').is(":visible")) $('.navbar-toggler').click();
Bootstrap définit une classe .in sur l'élément Collapse pour déclencher l'animation - pour l'ouvrir. Si vous supprimez simplement la classe .in, l'animation ne s'exécutera pas mais masquera l'élément - pas exactement ce que vous voulez.
Probablement plus rapide d'exécuter une instruction if pour vérifier si la classe d'amorçage par défaut .in a été définie sur l'élément.
Alors ce code dit juste:
si la classe
.inest appliquée dans mon élément, fermez-le en déclenchant l'animation Bootstrap par défaut. Sinon, lancez l’action/animation Bootstrap par défaut pour l’ouvrir
$('#navbar a').on('click touchstart', function() {
// if .in class is set on element, the element is visible – you want to hide it
if ($('#navbar').hasClass('in')) {
// collapse toggle will remove the .in class and animate the element closed
$('#navbar').collapse('toggle');
}
})
Vue mobile: comment masquer la navigation dans bootstrap + dropdown + jquery + scrollto avec des éléments de navigation qui pointent sur des ancres/ids sur la même page, un modèle de page
Le problème que je testais avec l’une des solutions ci-dessus était qu’elles ne réduisaient que les éléments de sous-menu, alors que le menu de navigation ne se réduisait pas.
Alors j'ai fait ma pensée .. et que pouvons-nous observer? Eh bien, chaque fois que nous/les utilisateurs cliquons sur un lien de défilement, nous voulons que la page défile jusqu'à cette position et, simultanément, réduise le menu pour restaurer l'affichage de la page.
Eh bien ... pourquoi ne pas attribuer ce travail aux fonctions de défilement? Facile :-)
Donc, dans les deux codes
// scroll to top action
$('.scroll-top').on('click', function(event) {
event.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
et
// scroll function
function scrollToID(id, speed){
var offSet = 67;
var targetOffset = $(id).offset().top - offSet;
var mainNav = $('#main-nav');
$('html,body').animate({scrollTop:targetOffset}, speed);
if (mainNav.hasClass("open")) {
mainNav.css("height", "1px").removeClass("in").addClass("collapse");
mainNav.removeClass("open");
}
Je viens d'ajouter la même commande dans les deux fonctions
if($('.navbar-toggle').css('display') !='none'){
$(".navbar-toggle").trigger( "click" );
}
(bravo à l'un des contributeurs ci-dessus)
comme ceci (la même chose devrait être ajoutée aux deux parchemins)
$('.scroll-top').on('click', function(event) {
event.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
if($('.navbar-toggle').css('display') !='none'){
$(".navbar-toggle").trigger( "click" );
}
});
si vous voulez le voir en action, vérifiez-le recupero dati da NAS
J'ai posté une solution qui fonctionne avec Aurelia ici: https://stackoverflow.com/a/41465905/6466378
Le problème est que vous ne pouvez pas simplement ajouter data-toggle="collapse" et data-target="#navbar" à vos éléments a. Et jQuery ne fonctionne pas dans un environnement Aurelia ou Angular.
La meilleure solution pour moi était de créer un attribut personnalisé qui écoute la requête multimédia correspondante et ajoute dans l'attribut data-toggle="collapse" si vous le souhaitez:
<a href="#" ... collapse-toggle-if-less768 data-target="#navbar"> ...
L'attribut personnalisé avec Aurelia ressemble à ceci:
import {autoinject} from 'aurelia-framework';
@autoinject
export class CollapseToggleIfLess768CustomAttribute {
element: Element;
constructor(element: Element) {
this.element = element;
var mql = window.matchMedia("(min-width: 768px)");
mql.addListener((mediaQueryList: MediaQueryList) => this.handleMediaChange(mediaQueryList));
this.handleMediaChange(mql);
}
handleMediaChange(mediaQueryList: MediaQueryList) {
if (mediaQueryList.matches) {
var dataToggle = this.element.attributes.getNamedItem("data-toggle");
if (dataToggle) {
this.element.attributes.removeNamedItem("data-toggle");
}
} else {
var dataToggle = this.element.attributes.getNamedItem("data-toggle");
if (!dataToggle) {
var dataToggle = document.createAttribute("data-toggle");
dataToggle.value = "collapse";
this.element.attributes.setNamedItem(dataToggle);
}
}
}
}Cela cache l'effondrement de la navigation au lieu de l'animer, mais le même concept que ci-dessus answer
JS:
$('.nav a').on('click', function () {
$("#funk").toggleClass('in collapse');
});
HTML:
<div class="navbar-collapse" id="funk">
Je préfère cela sur les sites à une seule page car j'utilise localScroll.js qui anime déjà.
Les utilisateurs de Bootstrap3 essaient le code donné ci-dessous. Cela a fonctionné pour moi.
function close_toggle() {
if ($(window).width() <= 768) {
$('.nav a').on('click', function(){
$(".navbar-toggle").click();
});
}
else {
$('.nav a').off('click');
}
}
close_toggle();
$(window).resize(close_toggle);