basti1012.bplaced.net

Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
    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.

    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>