JSFiddle - React, Tailwind, and code Playground

by bouillard

HTML

<div id="nav">
    <ul>
        <li>1</li>
        <li>2</li>
        <li class="current">3
            <ul>
                <li><a href="example.com">3.1</a></li>
                <li>3.2
                    <ul>
                        <li><a href="example.com">3.2.1</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>4</li>
    </ul>
    
</div>

JavaScript

$(document).ready(function() {
    $("#nav ul li:not(:has(li.current))").find("ul").hide().end() // Hide all other ULs
    .click(function() {
        if (event.target==this) {
        $(this).children('ul').slideToggle('fast');
            return false;
        }
    });
});