JSFiddle - React, Tailwind, and code Playground

by s4ty

HTML

<div class="navs">
    <div class="dropdown">
        <a class="dropdown-toggle nav oberpunkt" data-toggle="dropdown" data-target="#nav" role="button">Link 1</a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <li><a href="#nav active" onmouseup="setVisible(act1)" class="nav unterpunkt" >Unterlink I</a></li>
                    <li><a href="#nav" class="nav unterpunkt" >Unterlink II</a></li>
                    <li><a href="#nav" class="nav unterpunkt" >Unterlink III</a></li>
                    <li><a href="#nav" class="nav unterpunkt" >Unterlink IV</a></li>
                </ul>
    </div>
    <div class="dropdown">
        <a class="dropdown-toggle nav oberpunkt" data-toggle="dropdown" data-target="#nav" role="button">Link 2</a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <li><a href="#nav active" onmouseup="setVisible(act1)" class="nav unterpunkt" >Unterlink I</a></li>
                    <li><a href="#nav" class="nav unterpunkt" >Unterlink II</a></li>
                    <li><a href="#nav" class="nav unterpunkt" >Unterlink III</a></li>
                    <li><a href="#nav" class="nav unterpunkt" >Unterlink IV</a></li>
                </ul>
    </div>
            <a href="#nav" class="nav oberpunkt">Link 3</a>
            <a href="#nav" class="nav oberpunkt">Link 4</a>
        </div>

CSS

ul { display: none; }
.active { color: red;}

JavaScript

$(".nav").click(function() {
    if($(this).hasClass("oberpunkt")) {
        $(".oberpunkt").removeClass("active")
        $(".navs").find("ul").slideUp();
        if($(this).next("ul").not(":visible")) { $(this).next("ul").stop().slideToggle(); }
    } else {
        $(".unterpunkt").removeClass("active")
        
    }
    
    $(this).addClass("active")
});