Twitter Bootstrap Nav ausblenden beim Klicken ausblenden

Dies ist kein Dropdown-Menü, die Kategorie ist Klasse li wie im Bild:

Durch Auswahl einer Kategorie aus dem Antwortmenü (die Vorlage ist nur eine Seite) möchte ich den Navigationskollaps beim Klicken automatisch ausblenden. Bummeln Sie auch zur Navigation, da die Vorlage nur eine Seite hat. Ich suche eine Lösung, die sich nicht darauf auswirkt. Hier ist der HTML-Code des Menüs:

    <!-- 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 -->

Versuche dies:

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

Ich repliziere einfach die 2 Attribute von btn-navbar( data-toggle="collapse" data-target=".nav-collapse.in") auf jedem Link wie folgt:

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

In der Bootstrap 4-Navigationsleiste wurde die Syntax wie folgtin geändert show:

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

$(function() {
    $('.nav a').on('click', function(){ 
        if($('.navbar-toggle').css('display') !='none'){
            $('.navbar-toggle').trigger( "click" );
        }
    });
});

Verwenden Sie besser die Standardmethoden für Collapse.js ( V3-Dokumente , V4-Dokumente ):

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

Noch eleganter ohne ein bisschen doppelten Code ist es, die Attribute data-toggle="collapse"und einfach data-target=".nav-collapse"auf das Navi selbst anzuwenden :

<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 sauber, kein JavaScript erforderlich. Funktioniert hervorragend, solange Ihre nav aElemente genügend Polsterung für dicke Finger haben und Sie nicht verhindern, dass Klickereignisse über das e.stopPropagation()Klicken von nav aElementen sprudeln .

Aktualisieren Sie Ihre

<li>
  <a href="#about">About</a>
</li>

zu

<li>
  <a data-toggle="collapse" data-target=".nav-collapse" href="#about">About</a>
</li>

Diese einfache Änderung hat bei mir funktioniert.

Ref: https://github.com/twbs/bootstrap/issues/9013

Die Navigation sollte jedes Mal geschlossen werden, wenn ein Benutzer irgendwo auf den Körper klickt - nicht nur auf Navigationselemente. Angenommen, das Menü ist geöffnet, aber der Benutzer klickt auf den Seitenkörper. Der Benutzer erwartet, dass das Menü geschlossen wird.

Sie müssen auch sicherstellen, dass die Umschalttaste sichtbar ist, da sonst ein Sprung im Menü angezeigt wird.

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

});

Getestet auf Bootstrap 3.3.6 - funktioniert!

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

Versuchen Sie dies> Bootstrap 3

Genial genau das, wonach ich gesucht habe, aber ich hatte einige Konflikte mit dem Javascript und dem Bootstrap-Modal, dies hat es behoben.

    $(function() {
    $('.navbar-nav').on('click', function(){ 
        if($('.navbar-header .navbar-toggle').css('display') !='none'){
            $(".navbar-header .navbar-toggle").trigger( "click" );
        }
    });
});

Hoffe das hilft.

Das hat bei mir gut funktioniert. Dies entspricht der akzeptierten Antwort, behebt jedoch das Problem in Bezug auf die Desktop- / Tablet-Ansicht

$('.navbar-nav a').on('click', function () {
        if (window.innerWidth <= 768) {
            $(".navbar-toggle").click();
        }
    });

Ich denke, es ist besser, die Collapse.js- Standardmethoden von Bootstrap 3 zu verwenden, indem Sie das .navbar-collapseals reduzierbares Element verwenden, das Sie wie unten gezeigt ausblenden möchten.

Andere Lösungen können andere unerwünschte Probleme mit der Anzeige oder Funktion von Elementen auf Ihrer Webseite verursachen. Obwohl einige Lösungen Ihr anfängliches Problem zu beheben scheinen, können andere sehr gut eingeführt werden. Stellen Sie daher sicher, dass Sie Ihre Site nach jeder Korrektur gründlich testen.

So sehen Sie diesen Code in Aktion:

1. Klicken Sie unten auf "Run This Code Snippet".
2. Drücken Sie die Taste "Ganzseite".
3. Fenster skalieren, bis das Dropdown-Menü aktiviert wird.
4. Dann wählen Sie eine Menüoption und voila!

Prost!

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

Geben Sie auf jedem Dropdown-Link data-toggle = "Collapse" und data-target = ". Nav-Collapse" ein, wobei Nav-Collapse der Name ist, den Sie der Dropdown-Liste geben.

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

Dies funktioniert perfekt auf Bildschirmen, die ein Dropdown-Menü wie mobile Bildschirme haben, aber auf Desktop und Tablet wird ein Flickr erstellt. Dies liegt daran, dass die Klasse .collapsing angewendet wird. Um das flickr zu entfernen, habe ich eine Medienabfrage erstellt und einen Überlauf eingefügt, der für die reduzierende Klasse verborgen ist.

@media (min-width: 768px) {
.collapsing {
    overflow: inherit;
  }
}

Das Hinzufügen von data-toggle = "apse "data-target =". Navbar-collapse.in "zu dem Tag <a>hat bei mir funktioniert.

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

So habe ich es gemacht. Wenn es einen reibungsloseren Weg gibt, sagen Sie es mir bitte.

In den <a>Tags, in denen sich die Links für das Menü befinden, habe ich diesen Code hinzugefügt:

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

Die Folienanimation bleibt erhalten. Bei voller Nutzung würde es also so aussehen:

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

// HINWEIS Ich habe den "Touchstart" für Mobile Touch hinzugefügt. Touchstart / End hat keine Verzögerung

Dies ist die beste Lösung, die ich verwendet habe.

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

    });

Für diejenigen, die bemerkt haben, dass Desktop-Navigationsleisten bei Verwendung dieser Lösung flackern:

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

Eine einfache Lösung für dieses Problem besteht darin, auf die ausgeblendete Navigationsleiste nur zu verweisen, indem überprüft wird, ob 'in' vorhanden ist:

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

Dadurch wird die Navigationsleiste beim Klicken reduziert, wenn sich die Navigationsleiste im mobilen Modus befindet, die Desktop-Version bleibt jedoch in Ruhe. Dies vermeidet das Flackern, das viele Menschen auf Desktop-Versionen gesehen haben.

Wenn Sie eine Navigationsleiste mit Dropdown-Menüs haben, können Sie diese nicht sehen, da die Navigationsleiste ausgeblendet wird, sobald Sie darauf klicken. Wenn Sie also Dropdown-Menüs haben (wie ich!), Verwenden Sie Folgendes:

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

Hierbei wird nach dem Vorhandensein der Dropdown-Klasse über dem im DOM angeklickten Link gesucht. Wenn dieser vorhanden ist, wollte der Link ein Dropdown-Menü starten, sodass das Menü nicht ausgeblendet wird. Wenn Sie im Dropdown-Menü auf einen Link klicken, wird die Navigationsleiste korrekt ausgeblendet.

$("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% arbeiten: -

In HTML hinzufügen

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

Javascript

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

Dies verbirgt den Zusammenbruch der Navigation, anstatt ihn zu animieren, aber das gleiche Konzept wie oben

JS:

$('.nav a').on('click', function () {
    $("#funk").toggleClass('in collapse');
});

HTML:

<div class="navbar-collapse" id="funk">

Ich bevorzuge dies auf Websites mit nur einer Seite, da ich localScroll.js verwende, das bereits animiert ist.

Mobile Ansicht: Ausblenden der Umschaltnavigation in Bootstrap + Dropdown + JQuery + Scrollto mit Navigationselementen, die auf Anker / IDs auf derselben Seite verweisen , eine Seitenvorlage

Das Problem, mit dem ich mit einer der oben genannten Lösungen experimentiert habe, war, dass nur die Untermenüelemente reduziert werden, während das Navigationsmenü nicht reduziert wird.

Also habe ich meine Gedanken gemacht ... und was können wir beobachten? Nun, jedes Mal, wenn wir / die Benutzer auf einen Scrollto-Link klicken, soll die Seite zu dieser Position scrollen und gleichzeitig das Menü reduzieren, um die Seitenansicht wiederherzustellen.

Nun ... warum diesen Job nicht den Scrollto-Funktionen zuweisen? Einfach :-)

Also in den beiden Codes

// scroll to top action
$('.scroll-top').on('click', function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop:0}, 'slow');

und

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

Ich habe gerade den gleichen Befehl in beiden Funktionen hinzugefügt

    if($('.navbar-toggle').css('display') !='none'){
    $(".navbar-toggle").trigger( "click" );
}

(ein großes Lob an einen der oben genannten Mitwirkenden)

so (das gleiche sollte zu beiden Schriftrollen hinzugefügt werden)

$('.scroll-top').on('click', function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop:0}, 'slow');
if($('.navbar-toggle').css('display') !='none'){
    $(".navbar-toggle").trigger( "click" );
}
});

Wenn du es in Aktion sehen willst, schau es dir einfach bei recupero dati da NAS an

Bootstrap3-Benutzer versuchen den unten angegebenen Code. Es hat bei mir funktioniert.

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 legt eine .inKlasse für das Collapse-Element fest, um die Animation auszulösen und zu öffnen. Wenn Sie die .inKlasse einfach entfernen , wird die Animation nicht ausgeführt, sondern das Element wird ausgeblendet - nicht genau das, was Sie möchten.

Es ist wahrscheinlich schneller, eine ifAnweisung auszuführen , um zu überprüfen, ob die Standard-Bootstrap-Klasse .infür das Element festgelegt wurde.

Dieser Code sagt also nur:

wenn mein Element die Klasse hat .in angewendet wurde, schließen Sie sie, indem Sie die Standard-Bootstrap-Animation auslösen. Andernfalls führen Sie die Standard-Bootstrap-Aktion / -Animation zum Öffnen aus

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

Fügen Sie dann jedem eine ID hinzu

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

Eine weitere schnelle Lösung für Bootstrap 3. * könnte sein:

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

Ich habe hier eine Lösung veröffentlicht, die mit Aurelia funktioniert: https://stackoverflow.com/a/41465905/6466378

Das Problem ist , man kann nicht einfach addieren data-toggle="collapse"und data-target="#navbar"zu Ihrem einem Elemente. Und jQuery funktioniert nicht, wenn es sich um eine Aurelia- oder Angular-Umgebung handelt.

Die beste Lösung für mich war, ein benutzerdefiniertes Attribut zu erstellen, das die entsprechende Medienabfrage abhört und das data-toggle="collapse"Attribut bei Bedarf hinzufügt :

<a href="#" ... collapse-toggle-if-less768 data-target="#navbar"> ...

Das benutzerdefinierte Attribut mit Aurelia sieht folgendermaßen aus:

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

Ich bin auf Bootstrap 4, verwende fullPage.js mit einem festen Navigationssystem und habe alles hier Aufgetestete mit gemischten Ergebnissen ausprobiert.

• Versuchte den besten, sauberen Weg:

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

  Das Menü würde zusammenbrechen, aber die href-Links würden nirgendwohin führen.

• Versuchte die logischen anderen Wege:

  $('myClickableElements').on('click touchstart', function(){
    $(".navbar-collapse.show").collapse('hide');
    // or
    $(".navbar-collapse.show").collapse('toggle');
    // or
    $('.navbar-toggler').click()
  });

  Aufgrund des Touchstart-Ereignisses würde es ein seltsames Verhalten geben: Die angeklickten Schaltflächen würden nicht die sein, auf die ich tatsächlich geklickt habe, wodurch die Links unterbrochen würden. Außerdem würde es die .show-Klasse zu einigen anderen nicht verwandten Dropdowns in meinem Navi hinzufügen, was noch mehr seltsame Dinge verursachen würde.

• Versucht, div in li zu ändern
• Versucht, e.preventDefault () und e.stopPropagation ()
• Versuchte und versuchte mehr

Nichts würde funktionieren.

Stattdessen hatte ich die (bisher) wunderbare Idee, dies zu tun:

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

Ich hatte bereits Sachen in dieser Hashchange-Funktion, si ich musste nur diese Zeile hinzufügen.

Es macht genau das, was ich will: das Menü reduzieren, wenn sich der Hash ändert (dh ein Klick, der an eine andere Stelle führt, ist aufgetreten). Was gut ist, denn ich kann jetzt Links in meinem Menü haben, die es nicht reduzieren.

Wer weiß, vielleicht hilft das jemandem in meiner Situation!

Und danke an alle, die an diesem Thread teilgenommen haben, viele Informationen, die hier gelernt werden können.

In den meisten Fällen möchten Sie die Umschaltfunktion nur aufrufen, wenn die Umschalttaste sichtbar ist ...

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

Das eingecheckte Menü wird geöffnet, indem die Klasse 'in' eingecheckt und dann der Code ausgeführt wird.

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

funktioniert perfekt.