Komm zur dunklen Seite der Macht, wir verwenden Cookies! Alles zum Datenschutz findest du hier: Datenschutz.

Bootstrap Mobile navbar außerhalb schließen

Bei der aktuellen Bootstrap Version v3.3.7 zeigte sich ein kleiner Fehler in der mobilen navbar. Wenn die navbar geöffnet ist und man außerhalb der navbar im content bereich klickt, wird die navbar nicht automatisch geschlossen.

Um diesen Fehler zu beheben habe ich folgendes kleines Javascript geschrieben:

// close bootstrap nav menu on click for single page app
var navMain = $('#navbar-main-collapse');
navMain.on("click", "a", null, function (event) {
  // ignore dropdown toggles
  if(event.currentTarget.className.indexOf('dropdown-toggle') !== false){
    return;
  }
  navMain.collapse('hide');
});

// close bootstrap nav menu on click on document body without clicking any link
if(navMain.has('.in')){
    $(document).on('click', null, function(){
        navMain.collapse('hide');
    });
}

Das Script sucht nach dem navbar Element mit der ID #navbar-main-collapse und fügt zunächst einen onClick EventHandler hinzu. Wenn das Click Event auf ein Dropdown Element ausgeführt wurde, verlassen wir den Handler. Ist es kein Dropdown schließen wir das menu.

Das zweite if Statement prüft bei einem Click außerhalb von #navbar-main-collapse ob die navbar geöffnet ist und wenn ja, dann wird sie geschlossen.