Проблема заключается в том, что вы используете конкретные селекторы для определения элементов, которые должны показываться или скрываться при нажатии кнопки. Вы должны изменить ваш подход и использовать обобщенные селекторы для всех подменю.
Вот пример, как вы можете изменить ваш код для работы с различными подменю:
```javascript
const cartsBody = document.querySelector('.card-body');
const mobiCategories = document.querySelector('.mobile-categories');
if (cartsBody) {
cartsBody.addEventListener("click", function (e) {
document.body.classList.toggle('_lock');
cartsBody.classList.toggle('_active');
mobiCategories.classList.toggle('_active');
// Скрываем все другие подменю, кроме текущего
const otherMenus = document.querySelectorAll('.mobile-categories');
otherMenus.forEach(function(menu) {
if (menu !== mobiCategories) {
menu.classList.remove('_active');
}
});
});
}
const cartsMobiBtns = document.querySelectorAll('.category-btn');
const mobiCategoriesDepartments = document.querySelector('.categories__main');
if (cartsMobiBtns) {
cartsMobiBtns.forEach(function(btn) {
btn.addEventListener("click", function (e) {
btn.classList.toggle('_active');
mobiCategoriesDepartments.classList.toggle('_active');
// Скрываем все другие подменю, кроме текущего
const otherBtns = document.querySelectorAll('.category-btn');
otherBtns.forEach(function(otherBtn) {
if (otherBtn !== btn) {
otherBtn.classList.remove('_active');
}
});
});
});
}
```
В этом коде мы используем `querySelectorAll` для выбора всех кнопок и все подменю, и затем перебираем их с помощью `forEach`. Затем мы проверяем, является ли текущий элемент равным текущему событию, и если нет, то мы удаляем класс `_active` у этого элемента, чтобы скрыть его. Это позволяет нам работать с различными подменю и кнопками.
