JSFiddle - React, Tailwind, and code Playground

by gRoberts

HTML

<ul id="menubar">
        <li class="menu">
            <a href="#">Menu 1</a>
            <ul class="submenubar">
                <li class="submenu"><a href="#">Submenu 1</a></li>
            </ul>
        </li>
        <li class="menu">
            <a href="#">Menu 2</a>
            <ul class="submenubar">
                <li class="submenu"><a href="#">Submenu 2</a></li>
            </ul>
        </li>
</ul>

JavaScript

$(document).ready(function(){
            $('.submenubar').hide()
            $('li.menu a').click(function(e){
                e.stopPropagation();
                var ul = $(this).parent().find('> ul');
                $('.submenubar').not(ul).slideUp('fast');
                ul.slideDown('fast');
            })
        })