Tabs verschwinden lassen

greenotom5 · 28. Oktober 2019

Code

$('.menu-toggle').click(function() {
            $('nav').toggleClass('active')    
          })
            $(document).mouseup(function (e){
    var container = $("nav");
    if (!container.is(e.target) && container.has(e.target).length === 0){
        $('nav').removeClass('active')
        
    }
});

Die Navigation lässt sich ohne Problem über "menu-toggle" öffnen und auch ohne Probleme schließen, wenn man außerhalb der Navigation klickt. Sobald man jedoch über "menu-toggle" die Navigation schließen möchte passiert leider nichts.

Arne Drews · 28. Oktober 2019

jQuery biete ich zwar nicht, aber in nativem JS problemlos abbildbar, denn toggle() existiert auch dort:

HTML

<button id="toggler">Toggle</button>
<nav>
  <ul>
    <li><a href="https://www.DuckDuckGo.com">DuckDuckGo</a></li>
    <li><a href="https://www.Ghostery.com">Ghostery</a></li>
    <li><a href="https://www.Comodo.com">Comodo</a></li>
  </ul>
</nav>

CSS

nav { display:none; }
nav.active { display:block; }

JavaScript

var _nav = document.querySelector( 'nav' );
var _toggler = document.querySelector( '#toggler' );

document.addEventListener('click', function(e) {
  if ( e.target != _nav && e.target != _toggler )
    _nav.classList.remove( 'active' );
});

_toggler.addEventListener( 'click', function(e) {
  _nav.classList.toggle( 'active' );
});

Alles anzeigen

greenotom5 · 28. Oktober 2019

Jetzt habe ich das Problem, dass die Navigation verschwindet sobald ich auf den aufgeklappten Bereich der Navigation klicke. Genau dieser Bereich sollte ja verschont bleiben.

Arne Drews · 28. Oktober 2019

Und was passiert bei Dir innerhalb einer Navigation?

Wenn ich davon ausgehe, dass eine Navigation zum Navigieren innerhalb der Unterseiten einer Website gedacht ist, wird doch eh eine neue Seite geladen.

Wenn die Navi dann ausgeklappt bleiben soll, musst Du mit Parametern arbeiten oder den Content asynchron lade.

Welche Variante setzt Du ein?

Was hältst Du davon:

JavaScript

ar _nav = document.querySelector( 'nav' );
var _toggler = document.querySelector( '#toggler' );

document.addEventListener('click', function(e) {
  
  _items = Array.prototype.indexOf.call( _nav.querySelectorAll('*'), e.target);
  
  if ( e.target == _toggler )
    _nav.classList.toggle( 'active' );
  
  if ( e.target != _toggler && _items == -1 )
    _nav.classList.remove( 'active' );
});

Alles anzeigen

greenotom5 · 28. Oktober 2019

In der Navigation habe ich ja nochmal <ul> <li> drin, deshalb sollte man die Sublinks auch beim Klicken innerhalb der Nav angezeigt bekommen.

Ich habe eine Lösung gefunden und zwar habe ich einen Neuen Toggle nach der Aktivierung der Navigation über den eigentlichen gesetzt, um den Konflikt zu umgehen und die Navigation kann nun auch darüber geschlossen werden.

Ist zwar nicht sehr elegant gelöst, aber dem Nutzer wird es nicht auffallen.

Danke für die Hilfe.

Arne Drews · 28. Oktober 2019

Und warum so umständlich? Was stört Dich denn an #4?

greenotom5 · 30. Oktober 2019

@Arne ich kriege die zweite JS-Variante leider nicht zum laufen das nav wird beim Klicken auf das Toggle nicht ausgelöst

Arne Drews · 30. Oktober 2019

Zeig mal Dein HTML, dann kann ich vielleicht mehr sagen.

Tabs verschwinden lassen

Jetzt mitmachen!

Teilen