JSFiddle - React, Tailwind, and code Playground

by skodnik

HTML

<div class="widget"> <!-- Стандартный класс для виджета wordpress -->
    <ul id="menu-name" class="menu"> <!-- Идентификатор произвольного меню "menu-name" где "-name" название меню -->
        <li class="menu-item"><a href="#">Первый уровень без вложения 1</a></li>
        <li class="menu-item"><a href="#">Первый уровень без вложения 2</a></li>
        <li class="menu-item">
            <a href="#">Первый уровень есть вложение</a>
            <ul class="sub-menu">
                <li class="menu-item"><a href="#">Второй уровень без вложения 1</a></li>
                <li class="menu-item"><a href="#">Второй уровень без вложения 2</a></li>
                <li class="menu-item"><a href="#">Второй уровень без вложения 3</a></li>
                <li class="menu-item"><a href="#">Второй уровень без вложения 4</a></li>
            </ul>
        </li>
        <li class="menu-item"><a href="#">Первый уровень без вложения 3</a></li>
        <li class="menu-item">
            <a href="#">Первый уровень есть вложение</a>
            <ul class="sub-menu">
                <li class="menu-item"><a href="#">Второй уровень без вложения 1</a></li>
                <li class="menu-item"><a href="#">Второй уровень без вложения 2</a></li>
                <li class="menu-item"><a href="#">Второй уровень без вложения 3</a></li>
                <li class="menu-item">
                    <a href="#">Второй уровень есть вложение</a>
                    <ul class="sub-menu">
                        <li class="menu-item"><a href="#">Третий уровень без вложения 1</a></li>
                        <li class="menu-item"><a href="#">Третий уровень без вложения 2</a></li>
                        <li class="menu-item"><a href="#">Третий уровень без вложения 3</a></li>
                        <li class="menu-item"><a href="#">Третий уровень без вложения 4</a></li>
                    </ul>
                </li>
                <li class="menu-item"><a href="#">Второй уровень без вложения...

CSS

.menu .menu-item {
    margin: 5px; /* Отступы для всех list-item */
}
.menu .sub-menu {
    display: none; /* Скрываем вложенные пункты */
    margin-left: 10px; /* Отступ слева для вложенных list-item */
}

JavaScript

var $j = jQuery.noConflict();
$j(document).ready(function()
{
    $j('.menu li').toggle
    (
        function ()
        {
            //показать подменю
           $j("ul:first", this).slideDown(100);
        },
        function ()
        {
            //скрыть подменю
             $j('ul:first', this).slideUp(100);
        }
    );  

})