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

jQuery(document).ready(function() {
    jQuery('.widget .menu-item:has(.sub-menu)').children('a').toggle( // Выбираем все ссылки из .menu-item имеющего во вложении .sub-menu

    function() {
        jQuery(this).parent('.menu-item').children('.sub-menu').css('display', 'block'); // Показываем вложенный пункт 
    }, function() {
        jQuery(this).parent('.menu-item').children('.sub-menu').css('display', 'none'); // Скрываем вложенный пункт
    });
});