Для достижения желаемого поведения - закрытия предыдущего элемента и открытия следующего при клике на другой пункт меню в JavaScript - можно использовать следующий подход.
Во-первых, вам понадобится HTML-разметка с соответствующими элементами меню. Например:
<ul id="menu"> <li class="menu-item">Пункт 1</li> <li class="menu-item">Пункт 2</li> <li class="menu-item">Пункт 3</li> </ul>
Затем, вам нужно привязать обработчик события клика к каждому пункту меню. Самый простой способ - это использовать метод addEventListener
:
var menuItems = document.querySelectorAll(".menu-item"); menuItems.forEach(function(item) { item.addEventListener("click", function() { // Ваш код для закрытия предыдущего элемента и открытия текущего }); });
Внутри обработчика события, вам нужно создать логику для закрытия предыдущего элемента и открытия текущего. Следующие шаги могут вам помочь в этом:
1. Создайте переменные для хранения ссылки на предыдущий и текущий элементы меню, например previousItem
и currentItem
.
2. Проверьте, существует ли предыдущий элемент. Если да, удалите у него класс или свойство, которые отвечают за открытие элемента.
3. Присвойте переменной previousItem
значение currentItem
.
4. Добавьте класс или свойство, которые отвечают за открытие элемента, к текущему пункту меню.
Вот как может выглядеть полный код:
var menuItems = document.querySelectorAll(".menu-item"); var previousItem = null; menuItems.forEach(function(item) { item.addEventListener("click", function() { if (previousItem) { // Закрываем предыдущий элемент previousItem.classList.remove("open"); // Или меняем свойство отображение предыдущего элемента // previousItem.style.display = "none"; } // Открываем текущий элемент this.classList.add("open"); // Или меняем свойство отображение текущего элемента // this.style.display = "block"; previousItem = this; }); });
В приведенном выше коде предполагается, что вы используете класс "open" для отслеживания открытого элемента меню. Вы можете изменить это на свой собственный класс или свойство, в зависимости от предпочтений и требований вашего проекта.
Надеюсь, что данное объяснение поможет вам реализовать требуемое поведение в вашем проекте на JavaScript.