JSFiddle - React, Tailwind, and code Playground

by MightyPork

HTML

<a href="#mainMenu" class="menuLink">Main</a>

<a href="#menuTwo" class="menuLink">Menu 2</a>

<div id="mainMenu" class="menu">
    <ul>
        <li class="menuItem"><a href="#">item 1</a>

        </li>
        <li class="menuItem"><a href="#">item 2</a>

        </li>
        <li class="menuItem"><a href="#">item 3</a>

        </li>
        <li class="menuItem"><a href="#">item 4</a>

        </li>
        <li class="menuItem"><a href="#">item 5</a>

        </li>
    </ul>
</div>
<div id="menuTwo" class="menu">
    <ul>
        <li class="menuItem"><a href="#">item 1</a>

        </li>
        <li class="menuItem"><a href="#">item 2</a>

        </li>
        <li class="menuItem"><a href="#">item 3</a>

        </li>
        <li class="menuItem"><a href="#">item 4</a>

        </li>
        <li class="menuItem"><a href="#">item 5</a>

        </li>
    </ul>
</div>

CSS

#mainMenu {
    background-color: lightblue;
}
#menuTwo {
    background-color: lightgreen;
}
.menu {
    display: none;
    border: 1px solid black;
}

JavaScript

$(document).ready(function () {
    //Attach a handler to the document for clicks.
    $(document).on("click", function (e) {
        $('.menu').hide();
    });

    $('.menuLink').on("click", function (e) {
        $('.menu').hide();
        e.stopPropagation();
        e.preventDefault();
        var targetMenu = $(e.target).attr("href");
        $(targetMenu).show();
    });

    //Handle showing the menu.
    $('.menu').on("click", function (e) {
        e.stopPropagation();
    });
});