JSFiddle - React, Tailwind, and code Playground

by r043v

HTML

<div class="menuet">
    <span>top level</span>
    <ul>
        <li class="active">
            <a href="/wtf"><p>wtf wtf</p></a>
            <span>wtf</span>
            <ul>
                <li>
                    <a href="/wtf/woot"><p>woot woot</p></a>
                    <span>woot</span>
                </li>
                <li>
                    <a href="/wtf/mutnut"><p>bla mut nut dabla!</p></a>
                    <span>mutmut</span>
                </li>
            </ul>
        </li>
        <li>
            <a href="/polop"><p>polooooop:!</p></a>
            <span>polop</span>
        </li>
    </ul>
</div>

CSS

.menuet

JavaScript

$.fn.menuet = function(opt){
    var dopt = {
        backbutton : "span",
        menubutton : "a",
        active : ".active"
    };
    
    opt = $.extend(dopt, opt);
    
    return this.each(function(){
        var $m = $(this), c;
        
        $m.on("init",function(){
            c = opt;
            c.$m = $m;
            c.$ul = $m.find("ul");
            c.$li = c.$ul.children("li");
            c.$li.on("show",function(){
                var $c = $(this).show().children();
                var $show = $c.filter(menubutton);
                var $ul = $c.filter("ul");
                $c.not( $show.add($ul).show() ).hide();
                $ul.children("li").trigger("show")
                
            }).on("hide",function(){
                var $c = $(this).hide().children().hide();
            }).on("select",function(){
                var $t = c.$active = $(this);
                var $c = $t.children();
                var $show = $c.filter(c.menubutton).show();
                $c.not( $show ).hide();
                c.$li.not( $t ).hide();
                //$c.filter("ul").add( $c.filter() ).hide();
                //$c.filter()
            });

            c.$active = c.$li.filter(c.active);
            
            c.$currentEntry = c.$active.children("li")
            
            
           // console.log(c.$li);
            c.$back = c.$li.find(c.backbutton);
            c.$button = c.$li.find(c.menubutton);
            
            console.log(c.$li,c.active,c.$active);
            c.$path = c.$active.parentsUntil(".menuet","li").add(c.$active);
            
            c.$li.not( c.$path ).hide();
            c.$path.show();
            
            c.$child = c.$active.children();
            c.$child.not( c.menubutton ).hide();
            c.$child.filter( c.menubutton ).show();
            c.$child.filter(c.$ul).show().children("li");
            //.children(c.backbutton).css( "color", "red" );
            console.log("woot",...