JSFiddle - React, Tailwind, and code Playground

by Stphane

HTML

<ul id="root">
    <li class="innerMenuLi">
        <a href="#"><span>MainLi</span></a>
        <ul class="mainMenu">
            <li><a href="#" class="active"><span>mainMenu1</span></a></li>
            <li><a href="#"><span>mainMenu2</span></a></li>
            <li><a href="#"><span>mainMenu3</span></a></li>
            <li><a href="#"><span>mainMenu4</span></a></li>
            <li><a href="#"><span>mainMenu4</span></a></li>
            <li class="secondInnerMenu"><a href="#"><span>mainMenu5</span></a>
                <ul class="analyticsMenu">
                    <li><a href="#">secondInnerMenu1</a></li>
                    <li><a href="#">secondInnerMenu2</a></li>
                    <li><a href="#">secondInnerMenu3</a></li>
                    <li><a href="#">secondInnerMenu4</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS

ul, li{display:block}
li{background-color:red;border:1px solid black}
ul ul{display:none}

JavaScript

/* Event delegation menu click */
$('#root').on('click', function(e){
    var $t = $(e.target).closest('a'),
        $ul = $t.nextAll('ul').eq(0);
    if($t.length && $ul.length){
        $ul.toggleClass('open').slideToggle();
    }
});