Schließen einer geöffneten komprimierten Navigationsleiste beim Klicken in Booststrap 4

Ich verwende momentan Bootstrap 4 und ich möchte eine komprimierte Navigationsleiste schließen, wenn ich nach draußen klicke. Es kann nur geschlossen werden, wenn Sie auf die Umschaltfläche klicken.Schließen einer geöffneten komprimierten Navigationsleiste beim Klicken in Booststrap 4

Außerdem gibt es ein Problem mit den Nav-Links, wenn ich auf die Schaltfläche klicke. Nach dem Öffnen springen Nav-Links auf. Ich bin nicht in der Lage, die Ursache herauszufinden. Bitte, bitte helfen Sie mir mit meinem Problem. Vielen Dank!

Hier ist mein Code:

<body> 
<!-- start navbar --> 
<nav class="navbar navbar-light bg-faded navbar-fixed-top"> 
    <button class="navbar-toggler hidden-lg-up float-xs-right" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button> 
    <a class="navbar-brand" href="#"></a> 

    <div class="collapse navbar-toggleable-md" id="main-navbar"> 
     <ul class="nav navbar-nav float-lg-right"> 
     <li class="nav-item"> 
      <a class="nav-link" href="#home">Home</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#section-about">About</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#section-portfolio">Portfolio</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#section-contact">Contact</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#resume">Resume</a> 
     </li> 
     </ul> 
    </div> 
    </nav> 
    <!-- end navbar --> 
</body>

Hier ist meine codepen Link:

http://codepen.io/marcvs/pen/jVONGM

Quelle

2017-01-05 marcvs

Hier Lösung für Ihr Problem:

$(document).ready(function() { 
    $(document).click(function (event) { 
     var clickover = $(event.target); 
     var _opened = $(".collapse").hasClass("collapse in"); 

     if (_opened === true && !clickover.hasClass("navbar-toggler")) { 
      $("button.navbar-toggler").click(); 
     } 
    }); 
});

Codepen: http://codepen.io/anon/pen/xgbmqr

Es ist eine modifizierte Version von this answer

Quelle

2017-01-05 21:37:18 DokiCRO

Vielen Dank für Ihre Hilfe. Hast du die Nav-Links gesehen? Ich habe ein Problem, wenn das kollabierte Nav öffnet, alle Links sind aufspringend. – marcvs

Sorry, aber ich habe jetzt keine Zeit, um dies zu debuggen, aber Sie können einen Blick auf https://v4-alpha.getbootstrap.com/components/navbar/#collapsible-content werfen und ich denke, dass Sie Problem finden, versuchen Sie, kopieren Sie alles einfügen und dann Code nach und nach wieder bearbeiten ... – DokiCRO

Kein Problem, danke nochmal für deine Hilfe :) Ich weiß es zu schätzen – marcvs

Schließen einer geöffneten komprimierten Navigationsleiste beim Klicken in Booststrap 4

Antwort

Verwandte Themen