JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<ul class="menu">
    <li>ПУНКТ 1</li>
    <li>ПУНКТ 2</li>
    <li>ПУНКТ 3
        <ul>
            <li>Подпункт 3-1
                <ul>
                    <li>Подпункт 3-1-1</li>
                    <li>Подпункт 3-1-2</li>
                </ul>
            </li>
            <li>Подпункт 3-2
                <ul>
                    <li>Подпункт 3-2-1</li>
                    <li>Подпункт 3-2-2</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>ПУНКТ 4
        <ul>
            <li>Подпункт 4-1</li>
            <li>Подпункт 4-2</li>
        </ul>
    </li>
</ul>

CSS

li{cursor:pointer;}

JavaScript

$('.menu ul').hide(); 
$('.menu li').click(function()
    {
        $(this).find('ul:first').slideDown();
        //if($(this).find('ul').length > 0)
        $(this).siblings().find('ul').slideUp();
    }
);