Per java-script von aria-expandet="undefined" auf aria-expandet="false"

    Hallo liebe Leute, ich benötige dringend eure Hilfe und zwar von jem mit javascript-kenntnisse

    Folgende Ausgangssituation: Im Fall vom ausgeschaltetem javascript sollen alle Menüpunkte (auch die ausgeblendeten) alle angezeigt werden,

    doch nun benötige ich eine Weiche wenn also javascript aktiv ist , bedeutet also: von aria-expandet="undefined" auf aria-expandet="false" umschaltet.

    Bei aria-expandet="undefined" werden alle Menüpunkte angezeigt (bei ausgeschaltetem javascript, wie gewünscht:

    Dann muss, bei eingeschaltetem javascript, aus aria-expandet="undefined" aria-expandet="false" werden, da die Buttons auf Anfang stehen und alle Untermenüpunkte versteckt sein sollen.


    Wie schreibt man dieses script!


    Beispielseite:


    Bitte helft mir bitte damit bis morgen!


    Liebe Gruß & gute n8 der einsiedelnde

    Guck mal, ob das so reicht. Ist nur ein Beispiel mit ein Button.

    Das musst du dir dann bei dir anpassen.


    Der Button steht immer auf aria-expanded undefined.

    Wird das <script> geladen ,wird der Button auf aria-expanded false umgestellt.

    Die Quelltextausgabe soll nur zum Gegencheck sein damit man sieht das Javascript da auch was gemacht hat .


    https://basti1012.bplaced.net/…rdner=html-seminar&id=346

    Hmmmm, DAAAAANKEEEEE, habe es eingefügt (siehe Quelltext ) aber es funzt nicht. :o(

    Warscheinlich mus es anders "angepasst" werden, doch ich bin da nicht "firm" drin.

    ehm?


    Zitat von basti1012

    Kuck mal ob das so reicht. Ist nur ein Beispiel mit ein Button.

    Das mußt du dir dann bei dir anpassen.

    Du must den Code schon auf deine aria-expanded anpassen. Ich hatte das nur als Beispiel auf den einen Button gemacht. Du mußt den Code auf alle Buttons anwenden. Mit querySelector all, oder $query oder mit einer Schleife.


    Wenn du mit der Console in deinen Quellcode rein kuckst siehst du das der erste Button schon auf false seht

    Ich glaube das es zumindest so gehen sollten.Teste es doch mal.

    Du kannst dann ja über die Console sehen ob die Buttons dann alle den neuen aria-expanded Wert haben


    Code
    <script>
var buttons = document.querySelectorAll('button');
buttons.forEach((i) => {
      if(i.getAttribute("aria-expanded")=='undefined'){
                     i.setAttribute("aria-expanded","false");
      }
})
</script>
    1. Gib den Buttons, um die es geht ein weiteres Attribut oder eine Klasse.
    2. Blende die Buttons per CSS grundlegend erstmal ein, damit sie ohne JS sichtbar sind.
    3. Per JS selektieren, bspw. mit querySelectorAll(), wie basti1012 gezeigt hat und ausblenden.

    Eine Weiche benötigst Du dann nicht, weil alle Button per default da sind.

    Nur wenn JS aktiv ist und nicht von irgendwelchen AddIns geblockt wird, werden die Button ausgeblendet.

    Damit hast Du alles, was Du wolltest.


    Kurze Anmerkung:

    querySelectorAll() liefert eine NodeList zurück, für die IE11 ( bei Edge bin ich mir grad nicht sicher ) keine forEach()-Methode kennt. Hier würde das Script aus #6 also nicht auf die Art funktionieren. Dazu müsste die Methode forEach() nachgebaut oder auf for() zurückgegriffen werden.

    basti1012 Vielen Dank für Deine Antwort, tatsächlich, es funktioniert! DANKE! Gefällt mir +


    Lieber Arne Drews,

    auch Dir, vielen Dank für deine Antwort.

    Auch Dir: gefällt mir +


    Weiter mit post #14


    der einsiedelnde

    Was wäre, wenn man grundsätzlich alle Buttons aria-expandet = "true" setzen würde , den Sandwich Button und die Unter-Buttons der einzelnen Menüpunkte.


    Fall A) javascript ausgeschaltet:

    Die Menüpunkte (ul.group von mir genannt) (also Aktuelles , Arbeiten , CV etc.) werden angezeigt.

    Dann müßte NUR noch die Unter-Menüpunkte (div.nav-group von mir genannt) (bei Aktuelles wäre das aktuelle ausstellungen, Blog / bei Arbeiten wäre das Drifte

    rs, Waldfrieden etc. usw. ) auch noch eingeblendet werden.

    Aber dann setzt man die Unter - Menue Buttons auch aria-expandet = "true" dann werden diese Unter-Punkte auch angezeigt.

    (Also im html alles aria-expandet ="true" setzen!)


    Soweit zu javascript ausgeschaltet!


    Nun Fall B) javascrip an und großer Bildschirm


    Der Sandwich Button ist immer noch aria-expandet = "true" wird aber nicht angezeigt da ja per KLICK nichts angezeigt/umgeschaltet werden muss.

    Die einzelnen Menüpunkte (also Aktuelles , Arbeiten , CV etc.) werden ja angezeigt.

    Hier könnte man ja wie du angedeutet hast <button aria-hidden ="true" aria-expandet="true" ... usw.

    oder <button hidden .... usw. oder button aria-hidden aria-expandet="true" class ="treeitemmain hidden" benutzt werden.

    Sowohl bei ausgeschaltetem javascript und eben für den Fall B)


    Nun schieben wir das Bildschirmfenster zusammen, die magische 1440px Marke

    Dann müßte eben a) das hidden per javascript aus dem html entfernt werden (wie auch immer man es macht, siehe oben)

    UND b) sämtliche aria-expandet = "true" zu aria-expandet = "false" werden

    Denn dann werden die Menüpunkte als auch die Untermenü-Punkte ausgeblendet UND die Buttons werden angezeigt die nötig sind.

    Ersteinmal der Sandwich-Button.


    Für den letzten Fall (bei ganz schmalem Bildschirmfenster) gilt ja das selbe.


    Siehe das ganze im Test


    Bin mir nicht sicher ob ich damit richtig liege oder ob das auch nur MIST ist und viel zu kompliziert gedacht!


    Jetzt aber gute n8


    der einsiedelnde

    Bei deiner Beschreibung blickt man kaum noch durch,sonst hätte ich dir bestimmt schon was gepostet. Nur ich habe da mitlerweile den überblick verloren was du da überhaupt vor hast.


    Und was du mit deinen aria zeug vor hast verstehe ich mitlerweile auch nicht mehr.Wieso machst du es nicht einfach wie arne das in post #7 beschrieben hat. Einfach die Buttons ein und aus blenden.


    Was ist den jetzt mit den Script aus post #6 ? Du schriebst ja das es Funktioniert hat . Was ist den jetzt damit los ?

    Habe es nocheinmal neu illustriert:


    Â) javascript ausgeschaltet





    Fall B) Großer Bildschirm 1920px & javascript an





    Fall C) mittlerer Bildschirm <1440px & javascript an



    Fall D) schmalster Bildschirm <850px & javascript an




    Hoffentlich kann man nun die Links anklicken.

    Ansonsten:



    Mit der Bitte um Mithilfe ! Schaut euch mal Bitte die jpg`s bzw die PDF an.


    Mein Angebot steht noch:

    Ich suche jemanden der gegen "Bezahlung" mir diese Navigation schreibt.

    (erst Überweisung dann den Quelltext oder auf Rechnung egal...)


    Ernstgemeinte Angebote, bitte eine PN an mich, dann gebe ich euch meine Anschrift, Telefonnummer etc.


    Hauptsache ich bekomme es mal gelöst.



    der einsiedelnde

    Nicht gleich weinen.Auch ich kann nicht 24 Stunden an Pc sitzen und so schnelle geht das auch nicht alles.

    Ich versuche gleich mal mein Glück. Doch wie ich das so sehe kann man ja auf die aria-expanded kram verzichten. Wenn ich deine Bilder richtig verstehe geht es dir ja darum das die Buttons mit Js da sind und ohne js weg sind und das ohne Js das Menü geöffnet angezeigt wird.


    Dann die Bilschirmbreiten ist ja fast das gleiche.

    zu A) Nee, die Ausgangsposition soll sein das alle Unter-Menüpunkte ( div.nav-group ) geschlossen sind.

    Wollte Dir/Euch mit dem rechten Abbildung zeigen das man die Unterpunkte auch aufklappen könnte/kann.


    zu B)

    Auch hier ist die Ausgangssituation das alle Unterpunkte anfangs geschlossen sind.

    mit dem dritten ganz rechten Abbildung wollte ich wiederum nur zeigen das das man die Unterpunkte aufklappen kann.

    Nagut das erklärt zumindest schon mal einiges.

    Nur ich komme hier nicht weiter mit den aria. Irgendwie blockt hier ein addon oder sonst irgendwas. Sobald ich mit Javascript den aria ändere funktionieren die buttons gar nicht mehr.

    Ohne den aria kram wäre das wohl kein problem doch mit den funktioniert das hier nicht richtig. Da ich das dann nicht richtig testen kann soll da mal wer anders weiter machen .Vieleicht gibt es ein der nicht so ein Mist Rechner hat wie ich.

    Ich werde das noch ohne aria weiter machen. Falls du das dann haben willst sag bescheid ,ansonsten kuck mal weiter wer anders dazu lust hat.

    Falls sich keiner findet der dir um sonst helfen tut gibt es in anderen Foren wie html.de , forenhilfe.de und tutorials.de Job Börsen wo du solche Aufträge einstellen kannst.

    Nur mach vorher ein Preis aus weil Programmieren teuer werden kann.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden