Кнопка раскрывающегося списка в HTML/CSS/JS ⇐ Jquery

[Гость]

У меня есть код:

[*] .wrapper { дисплей: сетка; столбцы шаблона сетки: 1fr 1fr; разрыв сетки: 10 пикселей; } .tilecontainer { отступ: 5 пикселей; размер шрифта: 25 пикселей; ширина: 100%; } @media screen и (максимальная ширина: 768 пикселей) { .tilecontainer { размер шрифта: 16 пикселей; } } .коробка { цвет фона: #0051a5; отступ справа: 1em; отступ-верх: 1em; граница-радиус: 1em; дисплей: сетка; строки-шаблона сетки: 1fr авто; столбцы-шаблона сетки: авто 1em; Grid-template-areas: «образец плюс» «экстратекст экстратекст»; } .плюс { область сетки: плюс; фон: линейный градиент (#0051a5 0 0), линейный градиент (#0051a5 0 0), #fff; фоновая позиция: центр; размер фона: 60% 2,5 пикселей, 2,5 пикселей 60%; фоновый повтор: без повтора; переход: легкость преобразования 0,3 с; } .знак { радиус границы: 50%; ширина: 1эм; высота: 1ем; поле справа: 1em; } .tilelabel { область сетки: образец; семейство шрифтов: «PT Sans Narrow», без засечек; размер шрифта: 1em; преобразование текста: верхний регистр; курсор: указатель; вес шрифта: 600; цвет: #fff; отступ слева: 1em; высота: 2ем; } .tileaccent { цвет: #FFC72C; } .скрытый-текст { область сетки: экстратекст; дисплей: нет; семейство шрифтов: «PT Sans Narrow», без засечек; размер шрифта: 0,75em; цвет фона: #F5F5F4; цвет: #000; маржа: 1em; отступ-верх: 0,5em; отступ слева: 1em; граница-радиус: 1em; } .expanded>.скрытый-текст { дисплей: блок; анимация: постепенное появление 1 с; } @keyframes постепенное появление { от { непрозрачность: 0; } к { непрозрачность: 1; } } @keyframes постепенное исчезновение { от { непрозрачность: 1; } к { непрозрачность: 0; } } .hidden-text ul li ul { дисплей: нет; } .hidden-text ul li.active ul { дисплей: блок; } ли .plus { преобразование: поворот (0); } li.active .plus { преобразование: поворот (45 градусов); } /* Заменяет курсор на указатель на элементы списка, у которых есть дочерний ul */ .hidden-text ul li:has(ul) .plus { плавать: вправо; } .hidden-text ul li:has(ul) { стиль списка: нет; /* Удалить пункт списка по умолчанию */ } .hidden-text ul li:has(ul) { курсор: указатель; } .скрытый-текст ul { стиль списка: нет; /* Удаляем пункт по умолчанию для элементов ul */ } .hidden-text ul li { стиль списка: нет; } Пример текста Пример Пример Текст Текст Текст Текст Текст const tileLabels = document.querySelectorAll('.box .tilelabel'); tileLabels.forEach((метка) => { label.addEventListener('click', function() { const родительский = this.closest('.box'); // Находим ближайшего родителя с классом box родительский.classList.toggle('расширенный'); const plus = родительский.querySelector('.plus'); plus.style.transform = родительский.classList.contains('расширенный')? 'поворот (45 градусов)': 'поворот (0)'; }); }); const toggleChild = (e) => { если (e.currentTarget == e.target) { const el = e.target; el.classList.toggle('активный'); } }; const level2 = document.querySelectorAll('.hidden-text ul li:has(ul)'); level2.forEach((li) => li.addEventListener('click', toggleChild));

В этом коде, когда я нажимаю «Образец», внутренний раскрывающийся список автоматически расширяется, но как я могу сделать так, чтобы внутренние раскрывающиеся списки не раскрывались автоматически? Есть ли способ изменить код JS, чтобы справиться с этим?

Внутренняя кнопка раскрывающегося списка также не работает. Внутренний раскрывающийся список также контролируется основным раскрывающимся меню? Как я могу разделить их обоих? Одним из вариантов может быть дублирование класса, но это будет слишком утомительно и неэффективно, если я хочу иметь несколько внутренних раскрывающихся меню.