zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Zweites Klick soll das Submenü wieder verstecken

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.11.2015, 12:54
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard Zweites Klick soll das Submenü wieder verstecken

Nachtrag: die Lösung war - „tabindex“ für die Listenelemente der ersten Ebene.
Ich finde sie aber nicht als eine pauschale Lösung. In meinem konkreten Fall ergab sie sich eben aus dem Zusammenspiel von html, CSS und JavaScript.

------------------------------------------------------------

Ich habe mir für eine Navigation folgendes JavaScript (jQuery) gebastelt:
Code:
$(document).ready(function() {
  $('#menu > li > a').removeAttr("href");
  $('#menu > li').removeClass('jsHover');
  $('#menu').find('li[aria-haspopup="true"] > ul').attr('aria-hidden', 'true');
  $('#menu > li').on('focusin : click',function() {
    $('#menu > li').not(this).removeClass('jsHover').find('ul[aria-hidden="false"]').attr('aria-hidden', 'true')
    $(this).addClass('jsHover').find('ul[aria-hidden="true"]').attr('aria-hidden', 'false')
  });
  $('#menu > li').focusout(function() {
    $(this).removeClass('jsHover').find('ul[aria-hidden="false"]').attr('aria-hidden', 'true')
  });
});
Im html-Code sind die Links in der ersten Ebene Sprunglinks zu der jeweiligen UL der zweiten Ebene:
HTML-Code:
<nav id="nav" aria-labelledby="nav-title" role="navigation">
  <h2 id="nav-title"><span>Menü</span> <a class="menu-open" href="#nav">öffnen</a><span class="hidden">,</span> <a class="menu-close" href="#nav-title">schliessen</a></h2>
  <ul id="menu" role="menu">
    <li class="first-item" aria-haspopup="true" role="menuitem">
      <a href="#pages-die-gemeinde">Die Gemeinde</a><span class="hasSub">.</span>
      <ul id="pages-die-gemeinde" role="menu">
        <!-- Sublinks -->
      </ul>
    </li>
    <li> <!-- weitere Links --> </li>
  </ul>
</nav>
Funktioniert alles wie gewünscht:
Wenn der User einen Link der ersten Ebene anklickt, erscheint die Unterebe(n) als Drop-Down-Menü. Klick auf einem anderen Link der ersten Ebene versteckt das schon ausgeklappte Untermenü und zeigt das Untermenü des gerade angeklickten Link.

Problem: wenn der User doch keine Unterseite ansteuert, bleibt das Untermenü stehen (ausgeklappt).

Frage: wie erreiche ich es, dass ein erneutes Klick auf dem selben Link der ersten Ebene (oder ganz wo anders: body), das Untermenü wieder versteckt?

Danke.

Nachtrag:
Die Navigation ist auch mit der Tastatur bedienbar. Das beschriebene Problem tritt dabei nicht auf (focusout).
Vielleicht würde es reichen, die focusout-Funktion entsprechend zu erweitern, damit es auch beim erneuten Klick funktioniert. Ich habe allerdings keine Ahnung, wie das geht.
Was ich getestet habe, hatte eher die Bedienbarkeit mit der Tastatur zerstört

.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/

Geändert von etux (04.11.2015 um 07:18 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.11.2015, 07:18
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Ich sehe gerade, ich habe die Frage irreführend gestellt.
Für die Klasse kann ich ja „toggleClass“ statt „removeClass“ nehmen.
Mein Problem sind die Aria-Attribute:
Wie tausche ich bei einem erneuten Klick die Value (true, false)?
„toggleAttr“ gibt es ja nicht.
Code:
$(document).ready(function() {
  ..................
  $('#menu > li').on('focusin : click',function() {
    ..............
    $(this).find('ul[aria-hidden="true"]').attr('aria-hidden', 'false');
    $(this).toggleClass('jsHover')
  });
 .............
});
Nachtrag:
Das scheint zumindest halbwegs zu funktionieren. Die DOM-Manipulation ist korrekt, im Frontend funktioniert es allerdings erst dann, wenn ich paar mal hin und her geklickt habe:
Code:
$(document).ready(function() {
  ..................
  $('#menu > li').on('focusin : click',function() {
    ..............
    $(this).toggleClass('jsHover').find('.hasSub + ul').toggle(function(){
      if($(this).attr('aria-hidden')=='true') {
        $(this).attr('aria-hidden', 'false');
      } else {
        $(this).attr('aria-hidden', 'true');
      }
    });
  });
 .............
});
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/

Geändert von etux (03.11.2015 um 07:49 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.11.2015, 07:02
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Für das aktuelle Projekt habe ich die Lösung gefunden. Die Navigation ist mit Maus und Tastatur bedienbar; die Untermenüs können mit einem Klich ausserhalb der Navigation wieder versteckt werden (oder wenn der Focus verloren geht - Tastatur).
Die Listenelemente der ersten Ebene haben dafür „tabindex“ bekommen. So blieb das JavaScript wie gehabt.
Ein komplettes Beispiel (Testcase) poste ich aber (noch) nicht. Die Navigation, auch wenn ein wenig anders, ist Bestandteil der Themen, die ich aktuell für TYPO3 und Wordpress entwickele. Wird also eh demnächst (allein oder eben mit den Themen) Interessierten zur Verfügung stehen.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
iframe nach klick öffnen und starten Schnisi CSS 1 28.08.2014 23:24
Klick auf Link macht Navigation sichtbar Fanello CSS 3 20.06.2013 14:47
IE reagiert auf Klick auf Canvas nicht (Prototype) rumblebee Javascript & Ajax 4 21.09.2011 12:09
Aufklappendes Menü auf Klick, das dann auch bleibt alex87 CSS 4 19.09.2009 13:49
Klick auf ein Link, mehrere Sachen ändern Schneemann Javascript & Ajax 8 12.09.2006 12:00


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:09 Uhr.