JSFiddle - React, Tailwind, and code Playground

by s4ty

HTML

<nav id="navi">
      <div id="navihead"> <!-- Nur fuers Layout. Kein Inhalt vorhanden. --> </div>
        <ul>
           <li class="ebene1"><h4><a class="schublade">Programme</a></h4> <!-- Ebene 1 : PROGRAMME -->
              <!-- Ebene 2 : PROGRAMME -->
              <ul class="ebene2">
                 <li class="ebene2"><a href="spiele.php">Spiele</a></li>
                 <li class="ebene2"><a href="tools.php">Tools</a></li>
              </ul></li>
        </ul>
      <div id ="navifoot"> <!-- Nur fuers Layout. Kein Inhalt vorhanden. --> </div>
    </nav>

JavaScript

$(function(){ 
    $("ul.ebene2").css({display:"none"}); 
    $("#navi ul li").toggle( 
        function(){
            $(this)
                .css({backgroundImage:"url(../../bilder/up.png)"})
                .find("ul").slideDown("fast");
            
        }, 
        function(){
            $(this)
                .css({backgroundImage:"url(../../bilder/drop.png)"})
                .find("ul").slideUp("slow"); 
        } 
    );
    $('#navi a').click(function (){
        window.open($(this).attr('href'), '_self')
            
        return false;
    })
});