Bootstrap ferme le menu réactif "au clic"
Sur "PRODUITS", cliquez sur Je fais glisser un div blanc (voir ci-joint). En mode responsive (mobile et tablette), je souhaite fermer automatiquement la barre de navigation responsive et afficher uniquement la barre blanche.
J'ai essayé:
$('.btn-navbar').click();
également essayé:
$('.nav-collapse').toggle();
Et ça marche. Cependant, en taille de bureau, il est également appelé et fait quelque chose de génial dans le menu où il se réduit pendant une seconde.
Des idées?
Je l'ai pour travailler avec l'animation!
Menu en HTML:
<div id="nav-main" class="nav-collapse collapse">
<ul class="nav">
<li>
<a href='#somewhere'>Somewhere</a>
</li>
</ul>
</div>
Reliure d'un événement de clic sur tous les éléments de la navigation pour réduire le menu (plug-in Bootstrap collapse):
$(function(){
var navMain = $("#nav-main");
navMain.on("click", "a", null, function () {
navMain.collapse('hide');
});
});
EDIT Pour le rendre plus générique, nous pouvons utiliser l'extrait de code suivant
$(function(){
var navMain = $(".navbar-collapse"); // avoid dependency on #id
// "a:not([data-toggle])" - to avoid issues caused
// when you have dropdown inside navbar
navMain.on("click", "a:not([data-toggle])", null, function () {
navMain.collapse('hide');
});
});
Vous n'avez pas besoin d'ajouter de javascript supplémentaire à ce qui est déjà inclus avec l'option de réduction de bootstraps. Ajoutez simplement des sélecteurs de données et de cibles de données dans les éléments de votre liste de menus, comme vous le feriez avec le bouton de navigation. Donc, pour votre article de menu Produits, il ressemblerait à ceci
<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>
Ensuite, vous devrez répéter les sélecteurs data-toggle et data-target pour chaque élément de menu.
MODIFIER!!! Afin de résoudre les problèmes de débordement et de scintillement de ce correctif, j'ajoute un peu plus de code qui résoudra ce problème sans avoir de javascript supplémentaire. Voici le nouveau code:
<li><a href="#products" class="hidden-xs">Products</a></li>
<li><a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>
La voici au travail http://jsfiddle.net/jaketaylor/84mqazgq/
Cela rendra vos sélecteurs de bascule et de cible spécifiques à la taille de l'écran et éliminera les problèmes sur le menu plus grand. Si quelqu'un a toujours des problèmes avec des problèmes, s'il vous plaît faites le moi savoir et je vais trouver une solution. Merci
EDIT: Dans le bootstrap v4.1.3, je ne pouvais pas utiliser les classes visibles/cachées. Au lieu de hidden-xs, utilisez d-none d-sm-block et au lieu de visible-xs, utilisez d-block d-sm-none.
Je pense que vous êtes tous sur l'ingénierie ..
$('.navbar-collapse ul li a').click(function(){
$('.navbar-toggle:visible').click();
});
EDIT: Pour s’occuper des sous-menus, assurez-vous que la classe dropdown-toggle est présente sur leur ancre.
$(function () {
$('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function () {
$('.navbar-toggle:visible').click();
});
});
EDIT 2: Ajouter un support pour le contact téléphonique.
$(function () {
$('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
$('.navbar-toggle:visible').click();
});
});
J'ai vraiment aimé l'idée de Jake Taylor de le faire sans JavaScript supplémentaire et de profiter de la bascule Effondrement de Bootstrap. J'ai trouvé que vous pouvez résoudre le problème de "scintillement" lorsque le menu n'est pas en mode replié en modifiant légèrement le sélecteur data-target afin d'inclure la classe in. Donc ça ressemble à ça:
<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.in">Products</a></li>
Je ne l'ai pas testé avec des menus/menus déroulants imbriqués, donc YMMV.
juste pour être complet, dans Bootstrap 4.0.0-beta en utilisant .show a travaillé pour moi ...
<li>
<a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.show">Products</a>
</li>
Cela fonctionne, mais n'anime pas.
$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');
Je suppose que vous avez une ligne comme celle-ci définissant la zone de navigation, basée sur des exemples Bootstrap et tous
<div class="nav-collapse collapse" >
Ajoutez simplement les propriétés en tant que telles, comme sur le bouton MENU
<div class="nav-collapse collapse" data-toggle="collapse" data-target=".nav-collapse">
J'ai ajouté à <body> également, j'ai travaillé. Je ne peux pas dire que je l'ai profilé ou quoi que ce soit, mais cela me semble un régal ... jusqu'à ce que vous cliquiez sur un endroit aléatoire de l'interface utilisateur pour ouvrir le menu, donc pas si bon que ça.
NSP
Dans le HTML, j'ai ajouté une classe de nav-link au une balise de chaque lien de navigation.
$('.nav-link').click(
function () {
$('.navbar-collapse').removeClass('in');
}
);
cette solution fonctionne bien, sur ordinateur de bureau et mobile.
<div id="navbar" class="navbar-collapse collapse" data-toggle="collapse" data-target=".navbar-collapse collapse">
Pour ceux qui utilisent AngularJS et Angular UI Router avec ceci, voici ma solution (en utilisant le basculement de mollwe) . Où ".navbar-main-collapse" est ma "cible de données".
Créer une directive:
module.directive('navbarMainCollapse', ['$rootScope', function ($rootScope) {
return {
restrict: 'C',
link: function (scope, element) {
//watch for state/route change (Angular UI Router specific)
$rootScope.$on('$stateChangeSuccess', function () {
if (!element.hasClass('collapse')) {
element.collapse('hide');
}
});
}
};
}]);
Directive d'utilisation:
<div class="collapse navbar-collapse navbar-main-collapse">
<your menu>
Juste pour épeler la solution de user1040259, ajoutez ce code à votre $ (document) .ready (function () {});
$('.nav').click( function() {
$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');
});
Comme ils le mentionnent, cela n'anime pas le mouvement ... mais cela ferme la barre de navigation lors de la sélection des éléments.
Pas le dernier fil, mais j'ai cherché une solution pour le même problème et en ai trouvé une (un mélange de quelques autres).
J'ai donné le NavButton:
<type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> ...
un identifiant/identifiant comme:
<button id="navcop" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
Pas la meilleure "idée" - mais: ça marche pour moi! Maintenant, vous pouvez vérifier la visibilité de votre bouton (avec jQuery) comme:
var target = $('#navcop');
if(target.is(":visible")){
$('#navcop').click();
}
(NOTE: Ceci est juste un code snippé! J'ai utilisé un événement "onclick" sur mes liens de navigation! (Démarrage d'un Reguest AJAX.)
Le résultat est le suivant: Si le bouton est "visible", il a été "cliqué" ... Donc: aucun bug si vous utilisez la "vue plein écran" de Bootstrap (largeur supérieure à 940 pixels).
Salutations Ralph
PS: Cela fonctionne bien avec IE9, IE10 et Firefox 25. Je n'ai pas vérifié les autres - Mais je ne vois pas de problème :-)
Cela a fonctionné pour moi. J'ai fait comme quand je clique sur le bouton de menu, im ajoutant ou supprimant la classe 'in' car en ajoutant ou supprimant cette classe la bascule fonctionne par défaut. 'e.stopPropagation ()' est d'arrêter l'animation par défaut en bootstrap (je suppose), vous pouvez également utiliser le 'toggleClass' à la place de add ou remove classe.
$ ('# ChangeToggle'). Sur ('clic', fonction (e) {
if ($('.navbar-collapse').hasClass('in')) {
$('.navbar-collapse').removeClass('in');
e.stopPropagation();
} else {
$('.navbar-collapse').addClass('in');
$('.navbar-collapse').collapse();
}
});
Cela devrait faire l'affaire.
Nécessite bootstrap.js.
Exemple => http://getbootstrap.com/javascript/#collapse
$('.nav li a').click(function() {
$('#nav-main').collapse('hide');
});
Cela revient à ajouter les attributs 'data-toggle = "collapse"' et "href =" yournavigationID "aux balises des menus de navigation.
J'utilise la fonction mollwe, bien que j'aie ajouté 2 améliorations:
a) Évitez la fermeture du menu déroulant si le lien sur lequel vous cliquez est réduit (y compris d'autres liens)
b) Cachez également le menu déroulant si vous cliquez sur le contenu Web visible.
jQuery.fn.exists = function() {
return this.length > 0;
}
$(function() {
var navMain = $(".navbar-collapse");
navMain.on("click", "a", null, function() {
if ($(this).attr("href") !== "#") {
navMain.collapse('hide');
}
});
$("#content").bind("click", function() {
if ($(".navbar-collapse.navbar-ex1-collapse.in").exists()) {
navMain.collapse('hide');
}
});
});
Solution Bootstrap 4 sans Javascript
Ajouter les attributs data-toggle="collapse" data-target="#navbarSupportedContent.show" au div <div class="collapse navbar-collapse">
Assurez-vous de fournir la id correcte dans data-target
<div className="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent.show">
.showest d'éviter le scintillement de menu dans les grandes résolutions
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent.show">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>Tuggle Nav Close, réponse compatible avec le navigateur IE, sans erreur de console . Si vous utilisez un bootstrap, utilisez cette
$('.nav li a').on('click', function () {
if ($("#navbar").hasClass("in")) {
$('.navbar-collapse.in').show();
}
else {
$('.navbar-collapse.in').hide();
}
})
si le menu html est
<div id="nav-main" class="nav-collapse collapse">
<ul class="nav">
<li>
<a href='#somewhere'>Somewhere</a>
</li>
</ul>
</div>
on nav bascule 'in', la classe est ajoutée et supprimée de la bascule. vérifiez si le menu réactif est ouvert puis effectuez la bascule proche.
$('.nav-collapse .nav a').on('click', function(){
if ( $( '.nav-collapse' ).hasClass('in') ) {
$('.navbar-toggle').click();
}
});
Si, par exemple, votre icône à bascule n'est visible que pour les très petits périphériques, vous pouvez faire quelque chose comme ceci:
$('[data-toggle="offcanvas"]').click(function () {
$('#side-menu').toggleClass('hidden-xs');
});
En cliquant sur [data-toggle = "offcanvas"], le .hidden-xs de bootstrap sera ajouté au menu latéral de mon # qui masquera le contenu du menu latéral, mais qui redeviendra visible si vous augmentez la taille de la fenêtre.
Vous pouvez utiliser
ul.nav {
display: none;
}
Ceci fermera par défaut la barre de navigation . S'il vous plaît, laissez-moi savoir que tout le monde le trouve utile