Как сделать, чтобы при нажатии на кнопку всплывал список?

Question

[pologenki]

Написал на js код, по которому при нажатии внизу всплывает submenu как на картинке:


Все работает, но проблема в том, что работает только с одной вкладкой, когда нажимаешь на другие, submenu не выскакивает и класс active не переключается.

/**Сама кнопка при нажатии которой срабатывает */

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');
    });
}


/*Выплывающие submenu */

const cartsMobiBtn = document.querySelector('.category-btn');
const mobiCategoriesDepartments = document.querySelector('.categories__main');
if (cartsMobiBtn) {
    cartsMobiBtn.addEventListener("click", function (e) {
        cartsMobiBtn.classList.toggle('_active');
        mobiCategoriesDepartments.classList.toggle('_active');
    });
}

Comments

[pologenki]

Прочитал , но так понял что я меняю container.querySelector('.categories__main'); на container.querySelectorAll('.categories__main'); ?

[Николай]

pologenki, да, вы в своём коде ссылаетесь только на первый попавшийся в структуре .categories__main, а через querySelectorAll('.categories__main') вы найдете все такие элементы, с этим классом. И через цикл, уже навесите обработчик клика

Answer 1

[Moses Fender]

Когда-то давно, в прошлом веке, я тоже не видел разницы между обработчиком события и слушателем события.

Event listener — буквально так и переводится: "слушатель события". Т.е., когда мы назначаем элементу путём addEventListener некий обработчик, мы заставляем его слушать и реагировать на некоторое событие, возбуждается чем-то.

К чему я это… В таких неопределённых ситуациях всегда лучше делегировать слушателя, а иногда без этого просто не обойтись, особенно когда дело касается "мышиной возни" (MouseDown, MouseOver etc). Делегирование слушателя одному из предков, к тому же, имеет ещё одно неоспоримое преимущество: при динамическом изменении DOM, например при загрузке по ajax пресловутых элементов .mobile-categories, не нужно следить за прикреплением им слушателей каждый раз.

document.body.addEventListener('click', (ev)=>{
    if (ev.target.classList.includes('.mobile-categories')) {
       // Тут что-то делаем с ev.target
    }
});

Answer 2

[VoidVolker]

Прочитать документацию по Document.querySelector() и Document.querySelectorAll(), осознать разницу между двумя методами и использовать подходящий.