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

Hallo liebe Leute, ich benötige dringend eure Hilfe, und zwar von wem 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.

Der hier verwendete Code

<div id="breite"></div> <h3>Quelltext vorher</h3> <textarea style="width:400px;height:100px"> <button class="treeitem hidden" aria-expanded="true">button mit hidden</button> <br> <button class="treeitem" aria-expanded="true"> if true</button></textarea><br> <span> <button class="treeitem hidden" aria-expanded="true">button mit hidden</button> <button class="treeitem" aria-expanded="true"> if true</button> <button class="treeitemmain" aria-expanded="true"> treeitemmain</button> </span> <h3>Quelltext jetzt</h3> <div id="out"></div><br><br> <div id="info"></div> <script> function ermitteln(){ /* var buttons = document.querySelectorAll('button'); buttons.forEach((i) => { if(window.innerWidth>500){ if(i.getAttribute("class")=='treeitem'){ i.setAttribute("aria-expanded","false"); } if(i.getAttribute("class")=='treeitem hidden' && i.getAttribute("aria-expanded")=='true'){ i.setAttribute("class","treeitem"); } } if(window.innerWidth<=500){ if(i.getAttribute("class")=='treeitemmain hidden'){ i.setAttribute("class","treeitemmain"); } if(i.getAttribute("class")=='treeitemmain' && i.getAttribute("aria-expanded")=='true'){ i.setAttribute("aria-expanded","false"); } } */ var buttons = document.querySelectorAll('button'); for ( x=0; x<buttons.length; x++ ) { if(window.innerWidth>500){ if(buttons[x].getAttribute("class")=='treeitem'){ document.getElementById('info').innerHTML=buttons[x]+' treeitem Jetzt false'; buttons[x].setAttribute("aria-expanded","false"); } if(buttons[x].getAttribute("class")=='treeitem hidden' && buttons[x].getAttribute("aria-expanded")=='true'){ document.getElementById('info').innerHTML+=buttons[x]+' treetim hidden jetzt true'; buttons[x].setAttribute("class","treeitem"); } } if(window.innerWidth<=500){ if(buttons[x].getAttribute("class")=='treeitemmain hidden'){ document.getElementById('info').innerHTML=buttons[x]+' treetitem hidden jetzt ohne hidden'; buttons[x].setAttribute("class","treeitemmain"); } if(buttons[x].getAttribute("class")=='treeitemmain' && buttons[x].getAttribute("aria-expanded")=='true'){ document.getElementById('info').innerHTML+=buttons[x]+' ariaexpandet true jetzt false'; buttons[x].setAttribute("aria-expanded","false"); } } } //kann weg document.getElementById('breite').textContent=window.innerWidth+' Aktuelle Pixel'; rein=document.getElementsByTagName('span')[0].outerHTML; document.getElementById('out').textContent=rein+' <br>Browser Fensterbreite = '+window.outerWidth; // bis hier } window.addEventListener('resize', ermitteln); </script>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!