JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">
    <ul id='nav'>
        <li>Start</li>
        <li>Basics
            <ul>
                <li class="level_2">Installation</li>
                <li>Syntax</li>
                <li>Selektoren</li>
                <li>Events und Ereignisse</li>
                <li>Zusammenfassung</li>
            </ul>
        </li>
        <li>Effekte
            <ul>
                <li>Hide und Show</li>
                <li>Fade</li>
                <li>Slide</li>
                <li>Animate</li>
                <li>Stop</li>
                <li>Callback</li>
                <li>Chaining</li>
            </ul>
        </li>
        <li>HTML
            <ul>
                <li>Holen und Setzen</li>
                <li>Neuer Inhalt</li>
                <li>Inhalt Entfernen</li>
                <li>Holen und Setzen von CSS-Klassen</li>
                <li>CSS-Methoden</li>
                <li>Dimensionierung</li>
            </ul>
        </li>
        <li>Traversing
            <ul>
                <li>Hoch</li>
                <li>Runter</li>
                <li>Seitwärts</li>
                <li>Filtern</li>
            </ul>
        </li>
    </ul>
</div>

JavaScript

$("#nav li li").addClass("closed").hide();

	$("#nav > li").on( "click" , function(event){
        if (event.target !== this) { return; }
        $("#nav li").stop(true,true);
        
		if ( $(this).find(".closed")[0] ) {	
			// Wenn Menü geschlossen
			 $(".open").slideUp();
			         $(this).find("li").removeClass("closed").addClass("open").slideDown();

		} else {
			// Wenn Menü offen
			$(this).find("li").removeClass("open").addClass("closed").slideUp();
		}
	});



//$(".test > ul > li").css({"color":"red"});

//$('ul > li:has(ul)').css({"color":"red"});

//$('>ul>li').css({"color":"red"});

//$('>li').css({"color":"red"});

//$('ul#nav > li').css({"color":"red"});

//$('.test > ul > li').css({"color":"red"});

//$("ul#nav:first > li").css({"color":"red"});

//$("ul li:not(ul li ul li)").css({"color":"red"});

//$('ul#nav li').not('ul ul li').css({"color":"red"});

//$('ul li').not('ul li ul li').css({"color":"red"});

//$("#nav").children().css({"color":"red"});

//$(".test").find("ul").first().children().css({"color":"red"});

//$(".level_2").parents("li").last().css({"color":"red"});