Для решения вашей задачи можно воспользоваться JavaScript. Сначала добавим обработчики событий на клик для всех элементов меню. Когда происходит клик, обработчик будет закрывать все открытые подменю и открывать только то, которое соответствует выбранному пункту меню. Также будет происходить переключение класса `active`.
Предположим, у вас есть HTML-структура примерно такого вида:
```html
<div class="menu">
<div class="item">
<div class="название класса">Пункт меню 1</div>
<div class="more2">Содержимое 1</div>
</div>
<div class="item">
<div class="название класса">Пункт меню 2</div>
<div class="more2">Содержимое 2</div>
</div>
<!-- Повторите структуру для остальных пунктов меню -->
</div>
```
Вот пример JavaSript кода, который работает с такой структурой:
```javascript
document.addEventListener('DOMContentLoaded', function () {
// Получаем все элементы с классом "название класса".
var triggers = document.querySelectorAll('.название класса');
triggers.forEach(function(trigger) {
trigger.addEventListener('click', function() {
// Сначала убираем класс 'active' у всех элементов с классом 'more2'.
document.querySelectorAll('.more2').forEach(function(more) {
more.classList.remove('active');
});
// Добавляем класс 'active' к следующему элементу с классом 'more2'.
var moreContent = this.nextElementSibling;
if(moreContent && moreContent.classList.contains('more2')) {
moreContent.classList.add('active');
}
});
});
});
```
После того, как DOM полностью загружен, этот скрипт найдет все элементы с классом "название класса" и добавит обработчик события на клик. При клике сначала у всех элементов с классом "more2" будет убран класс "active", затем класс "active" будет добавлен к элементу "more2", который следует непосредственно за кликнутым элементом.
Не забудьте также настроить соответствующие стили CSS для класса `.active` для отображения и скрытия содержимого. Например:
```css
.more2 {
display: none; /* Скрываем все подменю по умолчанию */
}
.more2.active {
display: block; /* Показываем активное подменю */
}
```
Следует помнить, что `.nextElementSibling` является чувствительным к структуре вашего HTML, поэтому убедитесь, что `.more2` действительно является следующим элементом после `.название класса`. Если структура вашего HTML-документа сложнее, вам, возможно, придется использовать другие методы для нахождения соответствующего элемента для переключения `active` класса.