Переключите видимость div, наведя курсор на соответствующий элемент навигации с помощью JS.

На чтение 4 мин Опубликовано 01.11.2024

Содержание

Вопрос или проблема
Ответ или решение
Подход к решению
Пример реализации
CSS
JavaScript
Объяснение:
Итоги

Вопрос или проблема

У меня есть выпадающее меню с двумя колонками. В первой колонке есть список пунктов, и при наведении курсора на пункты соответствующий div должен стать видимым.

Также первая комбинация элемента списка и соответствующего div должна быть видимой при входе в выпадающее меню.

Вот что у меня есть на данный момент:

document.addEventListener("DOMContentLoaded", function(event) {
  let ktnavList = document.querySelector(".mm-dropdown--nav").children;
  let ktcatList = document.querySelector(".mm-dropdown--cat").children;
    for (let i=0; i<ktnavList.length; i++) {
      let li = ktnavList[i];
      let cat = ktcatList[i];
      li.addEventListener('mouseenter', () => {
      cat.classList.toggle('active-item');
      });
      li.addEventListener('mouseleave', () => {
      cat.classList.toggle('active-item');
      });
   };
});

Я могу переключать все элементы, кроме первого.
Мне нужно, чтобы первый div скрывался при наведении на второй элемент списка, но снова становился видимым при повторном входе в выпадающее меню (это должно быть стандартное состояние выпадающего меню).

Я также думаю, что мне не нужен обработчик ‘mouseleave’. Потому что он помешает пользователю получить доступ к содержимому div (больше элементов навигации).

Желательное поведение было бы таким: если я наведу курсор на один элемент списка, все остальные div, принадлежащие другим элементам списка, будут скрыты (переключить класс ‘active-item’).

Я не знаю, как переключать все другие div, которые не связаны с ‘mouseenter’.

Заранее спасибо.

Ответ или решение

Для реализации функции, позволяющей изменять видимость div-элементов при наведении мыши на соответствующие элементы навигации, мы можем оптимизировать ваш код. Предложенное решение также обеспечит, что при входе в выпадающее меню первый элемент будет видим, а при наведении на другие элементы будет скрыт текущий элемент, а отображен новый.

Подход к решению

Структура HTML – Убедитесь, что ваша разметка верна и соответствует классу, которые вы используете в JavaScript.
Инициализация состояния – При загрузке страницы первый div должен быть видимым.
Обработка событий – Использовать события mouseenter и mouseleave для навигации.

Пример реализации

<div class="mm-dropdown--nav">
  <ul>
    <li>Термин 1</li>
    <li>Термин 2</li>
    <li>Термин 3</li>
  </ul>
</div>
<div class="mm-dropdown--cat">
  <div class="content">Содержимое 1</div>
  <div class="content">Содержимое 2</div>
  <div class="content">Содержимое 3</div>
</div>

CSS

.content {
  display: none; /* Скрываем все по умолчанию */
}

.active-item {
  display: block; /* Показываем элемент при добавлении класса active-item */
}

JavaScript

document.addEventListener("DOMContentLoaded", function(event) {
    let ktnavList = document.querySelector(".mm-dropdown--nav").children;
    let ktcatList = document.querySelector(".mm-dropdown--cat").children;

    // Показать первый элемент при загрузке страницы
    ktcatList[0].classList.add('active-item');

    for (let i = 0; i < ktnavList.length; i++) {
        let li = ktnavList[i];
        let cat = ktcatList[i];

        li.addEventListener('mouseenter', () => {
            // Скрыть все элементы
            Array.from(ktcatList).forEach(item => item.classList.remove('active-item'));

            // Отобразить соответствующий элемент
            cat.classList.add('active-item');
        });
    }

    // Обработчик для отката состояния при уходе курсора из меню
    document.querySelector('.mm-dropdown--nav').addEventListener('mouseleave', () => {
        // Скрыть все элементы
        Array.from(ktcatList).forEach(item => item.classList.remove('active-item'));

        // Показать первый элемент снова
        ktcatList[0].classList.add('active-item');
    });
});

Объяснение:

Инициализация: Используем DOMContentLoaded, чтобы убедиться, что весь HTML загружен. При первой загрузке первый div из ktcatList становится видимым.
Цикл по элементам навигации: Для каждого элемента списка (nav-item) мы добавляем слушатель событий mouseenter. При наведении мы сначала скрываем все div элементы, удаляя класс active-item, а затем добавляем этот класс только к соответствующему элементу.
Событие mouseleave: Добавлено для обработки случая, когда курсор покидает область меню. При этом все элементы скрываются, и снова отображается первый div.

Итоги

Используя описанный подход, можно добиться ожидаемого поведения, которое соответствует требованиям. Однако, данный подход может быть дополнительно улучшен в зависимости от специфики ваших интерфейсов и их динамики. Подобная оптимизация сделает интерфейс более интуитивно понятным и улучшит пользовательский опыт в целом.