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>