JSFiddle - React, Tailwind, and code Playground

by halirgb

HTML

<ul>
    <li>stuff</li>
    <li>stuff</li>
    <li>stuff</li>
    <li class="dropdown">stuff
        <ul>
            <li>stuff</li>
            <li>stuff</li>
            <li>stuff</li>
            <li class="dropdown">stuff
                <ul>
                    <li>stuff</li>
                    <li>stuff</li>
                    <li>stuff</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS

.hide{
    display:none;
}

JavaScript

function openSubmenu(level){
    $(this).find('ul').removeClass('hide');
}
function closeSubmenu(level){
    $(this).find('ul').css('visibility', 'hidden');
}

// adding levels
var level = -1;
$('ul').each(function(){
    level++;
    if(level > 0){
        $(this).addClass('hide');
    }
    $(this).addClass('level-' + level);
})

$('li.dropdown').click(function(){
    var nextUl = $(this).next('ul');
    console.log(nextUl);
});