JSFiddle - React, Tailwind, and code Playground

by oceog

HTML

<div class="wrapper">
    <ul class="menu">
        <li tabindex="1">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <ul class="menu">
        <li tabindex="2">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <ul class="menu">
        <li tabindex="3">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>
<a href="#test">TEST</a>

CSS

.menu li {
    display: none;
    cursor: pointer;
}
.menu li:hover {
    background: yellow;
}

.menu li:first-child {
    display: block;
}
.menu.show li {
    display: block;
}

JavaScript

$(document).on('click', '.menu li:first-child', show_toggle);

function show_toggle() {
    var $parent=$(this).parent()
    $('.menu.show').not($parent).removeClass('show');
    $parent.toggleClass('show');
}
$(document).on('focus click', '*',focus_out);

function focus_out(e) {
    if ($(e.target).parents('.menu.show').length > 0) {
        return false;
    }
    $('.menu.show').removeClass('show');
}