JSFiddle - React, Tailwind, and code Playground

by Jonathan Sampson

HTML

<ul class="topnav">
    <li>Foo
        <ul class="submenu">
            <li>One</li>
            <li>Two</li>
        </ul>    
    </li>
    <li>Bar
        <ul class="submenu">
            <li>One</li>
            <li>Two</li>
        </ul>    
    </li>
</ul>

<p>Click off the menu to hide all visible sub menus</p>

CSS

ul.topnav {
    background: #f1f1f1;
    width: 200px;
}
ul.submenu {
    background: #CCC;
    margin-left: 10px;
}
ul.topnav > li:last-child {
    border-top: 1px solid #999;
}

JavaScript

$("ul.topnav").on("click", "li", function(e){
    e.stopPropagation();
    $(".submenu:visible", $(this).siblings()).slideUp("fast");
    $(".submenu", this).slideDown();
});

$(document).on("click", function(){
    $(".submenu:visible").slideUp();
});