JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav level-1">
    <li><a href="#">Link</a></li>
    <li class="has-submenu"><a href="#">Link</a>
        <ul class="level-2">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </li>
    <li class="has-submenu"><a href="#">Link</a>
        <ul class="level-2">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="has-submenu"><a href="#">Link</a>
                <ul class="level-3">
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="has-submenu"><a href="#">Link</a>
        <ul class="level-2">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </li>
</ul>

CSS

a {
    display:block;
    background:#aaa;
    border:1px solid #ccc;
    padding:5px;
    color:#fff;
}
li li {
    display:none;
}
.has-submenu > a:after {
    content:' + ';
}
.has-submenu .nav-open > a:after {
    content:' - ';
}
li li a {
    padding-left:40px;
    background:#888;
}
li li li a {
    padding-left:80px;
    background:#333;
}

JavaScript

$('.has-submenu > a').on('click', function (e) {
    e.preventDefault();
    
    // slide up currently open except if click is nested within an already open menu
    if ($(this).closest('.nav-open').length === 0)
    {
        $('.nav > .nav-open').removeClass('nav-open').find('> ul > li').slideUp();
    }
    
    // give the <li> the "nav-open" class, then slide the <li> grandchildren
    $(this).parent().toggleClass('nav-open').find('> ul > li').slideToggle();
});