Выпадающее меню JS

Рейтинг: 0Ответов: 1Опубликовано: 21.01.2023

Необходимо реализовать двухуровневое навигационное меню. При клике на пункт должны открываться подразделы. Подскажите, где допустила ошибку, как ее исправить? Изначально, когда кликала по пунктам был переход по ссылке, вместо открытия подразделов. Теперь вообще ничего не происходит, также в консоле появилась такая вот ошибка: Uncaught TypeError: Cannot read properties of null (reading 'classList') at HTMLUListElement.

Я пока новичок в этом всем, разбираюсь, но в рамках одного обучения нужно вот сделать так0е меню. Заранее большое спасибо!

'use strict';
const link = document.querySelector('.menu_main');

const menu__item = Array.from(
  document.querySelectorAll('.menu__item'));

function ShowItem(i) {
  menu__item[i].classList.toggle('show');
}
link.addEventListener('click', (e) => {
  e.preventDefault();
  const menu_sub = link.closest('.menu__item');
  if (menu_sub.classList.contains('menu_sub')) {
    menu_sub.classList.add('menu_active');
  }
})
body {
  margin: 0;
  padding: 0;
  font-family: Helvetica;
  font-weight: 300;
}

.menu {
  display: flex;
  list-style-type: none;
  justify-content: space-around;
  background: gray;
  box-sizing: border-box;
  padding: 10px 20px;
  margin: 0;
}

.menu__link {
  text-decoration: none;
  color: #000;
}

.menu__link:hover {
  color: whitesmoke;
}

.menu__item {
  position: relative;
}

.menu_sub {
  display: none;
  position: absolute;
  padding: 10px 10px 0 10px;
}

.menu_sub .menu__item {
  margin-bottom: 10px;
}

.menu_active {
  display: block;
  left: -10px;
  top: 100%;
  min-width: 100%;
}
<header class="header">
  <div class="logo__container">
    <a href="https://sait.ru/" class="logo__link"></a>
  </div>
  <h1 class="header__title">
    Домашнее задание к занятию 1.2 «Способы поиска нужного HTML-элемента». Навигационное меню.
  </h1>
</header>
<ul class="menu menu_main">
  <li class="menu__item">
    <a href="https://sait.ru/" class="menu__link">Главная</a>
  </li>
  <li class="menu__item">
    <a href="" class="menu__link">О компании</a>
    <ul class="menu menu_sub">
      <li class="menu__item">
        <a href="https://sait.ru/clients" class="menu__link">Клиенты</a>
      </li>
      <li class="menu__item">
        <a href="https://sait.ru/service" class="menu__link">Обслуживание</a>
      </li>
      <li class="menu__item">
        <a href="https://sait.ru/wearecool" class="menu__link">Награды</a>
      </li>
    </ul>
  </li>
  <li class="menu__item">
    <a href="" class="menu__link">Услуги</a>
    <ul class="menu menu_sub">
      <li class="menu__item">
        <a href="https://sait.ru/learn" class="menu__link">Обучение</a>
      </li>
      <li class="menu__item">
        <a href="https://sait.ru/consult" class="menu__link">Консультации</a>
      </li>
    </ul>
  </li>
  <li class="menu__item">
    <a href="https://saiy.ru/contacts" class="menu__link">Контакты</a>
  </li>
</ul>

javascript
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Подскажите, где допустила ошибку, как ее исправить?

Там сам алгоритм совсем не верный. Предлагаю рассмотреть вот такой вариант менюшки.

'use strict';
const link = document.querySelector('.menu_main');
link.addEventListener('click', e => {
  const o = e.target
  if (!o.classList.contains('menu__link')) return
  const op = o.closest('.menu__item')
  if (!op.querySelector('.menu_sub')) return
  e.preventDefault();
  let oa = op.querySelector('.menu_active')
  if (oa) {
    oa.classList.remove('menu_active');
    return
  } 
  oa = link.querySelector('.menu_active')
  if (oa) oa.classList.remove('menu_active');
  op.querySelector('.menu_sub').classList.add('menu_active')
})
body {
  margin: 0;
  padding: 0;
  font-family: Helvetica;
  font-weight: 300;
}

.menu {
  display: flex;
  list-style-type: none;
  justify-content: space-around;
  background: gray;
  box-sizing: border-box;
  padding: 10px 20px;
  margin: 0;
}

.menu__link {
  text-decoration: none;
  color: #000;
}

.menu__link:hover {
  color: whitesmoke;
}

.menu__item {
  position: relative;
}

.menu_sub {
  display: none;
  position: absolute;
  padding: 10px 10px 0 10px;
}

.menu_sub .menu__item {
  margin-bottom: 10px;
}

.menu_sub.menu_active {
  display: block;
  left: -10px;
  top: 100%;
  min-width: 100%;
}
<header class="header">
  <div class="logo__container">
    <a href="https://sait.ru/" class="logo__link"></a>
  </div>
  <h1 class="header__title">
    Домашнее задание к занятию 1.2 «Способы поиска нужного HTML-элемента». Навигационное меню.
  </h1>
</header>
<ul class="menu menu_main">
  <li class="menu__item">
    <a href="https://sait.ru/" class="menu__link">Главная</a>
  </li>
  <li class="menu__item">
    <a href="" class="menu__link">О компании</a>
    <ul class="menu menu_sub">
      <li class="menu__item">
        <a href="https://sait.ru/clients" class="menu__link">Клиенты</a>
      </li>
      <li class="menu__item">
        <a href="https://sait.ru/service" class="menu__link">Обслуживание</a>
      </li>
      <li class="menu__item">
        <a href="https://sait.ru/wearecool" class="menu__link">Награды</a>
      </li>
    </ul>
  </li>
  <li class="menu__item">
    <a href="" class="menu__link">Услуги</a>
    <ul class="menu menu_sub">
      <li class="menu__item">
        <a href="https://sait.ru/learn" class="menu__link">Обучение</a>
      </li>
      <li class="menu__item">
        <a href="https://sait.ru/consult" class="menu__link">Консультации</a>
      </li>
    </ul>
  </li>
  <li class="menu__item">
    <a href="https://saiy.ru/contacts" class="menu__link">Контакты</a>
  </li>
</ul>