Masquer la navigation Twitter Bootstrap Réduire au clic

Ce n'est pas une liste déroulante de sous-menu, la catégorie est de classe li comme dans l'image:

En sélectionnant une catégorie dans le menu réactif (le modèle est juste une page), je souhaite masquer automatiquement la réduction de la navigation lorsque vous cliquez. Promenez-vous également pour l'utiliser comme navigation, car le modèle n'a qu'une page. Je cherche une solution qui ne l'affecte pas, voici le code HTML du 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 réplique simplement 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 , ina été modifiée pour showque la syntaxe soit:

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 des méthodes par défaut collapse.js ( V3 docs , V4 docs ):

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

Encore plus élégant sans une couche de code dupliqué, il suffit d'appliquer 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, aucun JavaScript requis. Fonctionne très bien, tant que vos nav aéléments ont suffisamment de rembourrage pour les gros doigts et que vous n'empêchez pas l'événement de clic de bouillonner e.stopPropagation()lorsque les utilisateurs cliquent sur des nav aéléments.

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.

Réf: https://github.com/twbs/bootstrap/issues/9013

La navigation doit être fermée chaque fois qu'un utilisateur clique n'importe où sur le corps - pas seulement sur des é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 se fermer.

Vous devez également vous assurer que le bouton bascule est visible, sinon un saut est vu 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');
        }
  });

});

Testé sur Bootstrap 3.3.6 - ça marche!

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

Essayez ceci> Bootstrap 3

Brillant exactement ce que je cherchais, mais j'ai eu quelques conflits avec le javascript et le modal bootstrap, cela l'a corrigé.

    $(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.

Cela a bien fonctionné pour moi. C'est la même chose que la réponse acceptée mais corrige le problème lié à la vue du bureau / tablette

$('.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 pliable que vous souhaitez masquer, comme indiqué ci-dessous.

D'autres solutions peuvent entraîner d'autres problèmes indésirables avec la façon dont les éléments s'affichent ou fonctionnent dans votre page Web. Par conséquent, même si certaines solutions peuvent sembler résoudre votre problème initial, elles peuvent très bien en introduire d'autres, alors assurez-vous d'exécuter des tests approfondis de votre site après toute correction.

Pour voir ce code en action:

1. Cliquez sur "Exécuter cet extrait de code" ci-dessous.
2. Appuyez sur le bouton "Pleine page".
3. Échelle de la fenêtre jusqu'à ce que la liste déroulante s'active.
4. 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>

Sur chaque lien déroulant, placez data-toggle = "collapse" et data-target = ". Nav-collapse" où nav-collapse est le nom que vous lui donnez dans 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 dotés d'une liste déroulante comme les écrans mobiles, mais sur les ordinateurs de bureau et les tablettes, cela crée un flickr. C'est parce que la classe .collapsing est appliquée. Pour supprimer le flickr, j'ai créé une requête multimédia et inséré un débordement caché dans la classe 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 existe un moyen plus simple, veuillez me le dire.

À l'intérieur des <a>balises où se trouvent les liens du menu, j'ai ajouté ce code:

onclick="$('.navbar-toggle').click()"

Il préserve l'animation de la diapositive. Donc, en pleine utilisation, 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>

$(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

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
        });

    });

Pour ceux qui ont remarqué que les barres de navigation du bureau scintillent 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 uniquement 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 laisse seule la version de bureau. Cela évite le scintillement dont de nombreuses personnes ont été témoins sur les versions de bureau.

De plus, si vous avez une barre de navigation avec des 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 ce qui suit:

$('.nav a').on('click', function(e){
    if(!$(this).closest('li').hasClass('dropdown') & $( '.navbar-collapse').hasClass('in'))
    {
        $(".navbar-collapse").collapse('hide');
    }
});

Cela recherche la présence de la classe déroulante au-dessus du lien sur lequel on a cliqué dans le DOM, si elle existe, alors le lien avait l'intention 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 masque correctement.

$("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');
  }
});

100% fonctionnant: -

Ajouter du HTML

<div id="myMenu" class="nav-collapse">

Javascript

 $(function(){ 
 var navMain = $("#myMenu");
 navMain.on("click", "a", null, function () {
     navMain.collapse('hide');
 });
});

Cela masque l'effondrement de la navigation au lieu de l'animer mais le même concept que la réponse ci-dessus

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 à page unique car j'utilise localScroll.js qui anime déjà.

Vue mobile: comment masquer la navigation à bascule dans bootstrap + dropdown + jquery + scrollto avec des éléments de navigation qui pointent vers des ancres / identifiants sur la même page , un modèle de page

Le problème que j'expérimentais avec l'une des solutions ci-dessus était qu'elles ne réduisent que les éléments du sous-menu, tandis que le menu de navigation ne se réduit 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éduisons le menu pour restaurer la vue de la page.

Eh bien ... pourquoi ne pas attribuer ce travail aux fonctions scrollto? 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 ça (le même devrait être ajouté 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 simplement recupero dati da NAS

Les utilisateurs de Bootstrap3 essaient le code 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);

Bootstrap définit une .inclasse sur l'élément Collapse pour déclencher l'animation - pour l'ouvrir. Si vous supprimez simplement la .inclasse, l'animation ne s'exécute pas, mais masquera l'élément - pas exactement ce que vous voulez.

Probablement plus rapide d'exécuter une ifinstruction pour vérifier si la classe d'amorçage par défaut .ina été définie sur l'élément.

Donc, ce code dit simplement:

si mon élément a la classe .inappliquée, fermez-le en déclenchant l'animation Bootstrap par défaut. Sinon, exécutez 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');
    }
})

Ajoutez ensuite un identifiant à 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>

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
            }
        });
    });
});

J'ai publié 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. 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 l' data-toggle="collapse"attribut 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);
      }
    }
  }
}

Je suis sur Bootstrap 4, en utilisant fullPage.js avec une navigation supérieure fixe, et j'ai essayé tout ce qui est répertorié ici, avec des résultats mitigés.

• J'ai essayé la meilleure façon propre:

  data-toggle="collapse" data-target=".navbar-collapse.show"

  Le menu s'effondrerait, mais les liens href ne mèneraient nulle part.

• J'ai 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 ne seraient pas ceux sur lesquels j'ai cliqué, d'où la rupture des liens. De plus, cela ajouterait la classe .show à d'autres listes déroulantes sans rapport avec ma navigation, provoquant des trucs plus étranges.

• J'ai essayé de changer div en li
• J'ai essayé e.preventDefault () et e.stopPropagation ()
• Essayé et essayé plus

Rien ne marcherait.

Donc, à la place, j'ai eu la (jusqu'à présent) merveilleuse idée de faire ça:

$(window).on('hashchange',function(){
   $(".navbar-collapse.show").collapse('hide');
});

J'avais déjà des choses dans cette fonction de hachage, si je devais juste ajouter cette ligne.

En fait, il fait exactement ce que je veux: réduire le menu lorsque le hachage change (c'est-à-dire qu'un clic menant ailleurs s'est produit). Ce qui est bien, 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, plein d'informations à apprendre ici.

Dans la plupart des cas, vous ne voudrez appeler la fonction bascule que si le bouton bascule est visible ...

if ($('.navbar-toggler').is(":visible")) $('.navbar-toggler').click();

J'ai vérifié dans le menu est ouvert en vérifiant la classe «dans», puis exécutez le code.

$('.navbar-collapse a').on('click', function(){
    if ( $( '.navbar-collapse' ).hasClass('in') ) {
        $('.navbar-toggle').click();
    }
});

fonctionne parfaitement.