Не работает выпадающее меню js

Question

'use strict';
// js
const list = document.querySelector('.header__list'),
      items = document.querySelectorAll('.header__items'),
      item = document.querySelectorAll('.header__item');
      

        function showItems(i) {
            item[i].classList.toggle('show');
               };
          
         
         list.addEventListener('click', () => {
            const target = event.target;
            if(target && target.classList.contains('header__items')) {
                item.forEach((elem, i) => {
                    if(elem == target) {
                      showItems(i);
                    }
                });
          }
         });

//html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav class="header__nav">
            <ul class="header__list">
                <li class="header__items">Contacts
                    <div class="header__item">
                       <a  href="">1</a>
                        <a  href="">2</a>
                        <a  href="">3</a>
                        <a  href="">4</a>
                    </div>
                </li>
                <li class="header__items">About
                    <div class="header__item">
                       <a  href=""> 1</a>
                       <a  href=""> 2</a>
                       <a  href=""> 3</a>
                       <a  href=""> 4</a>
                    </div>
                </li>
                <li class="header__items">Team
                    <div class="header__item">
                       <a  href="">1</a>
                       <a  href="">2</a>
                       <a  href="">3</a>
                       <a  href="">4</a>            
                    </div>
                </li>
                <li class="header__items">Product
                    <div class="header__item">
                        <a  href="">1</a>
                        <a  href="">2</a>
                        <a  href="">3</a>
                        <a  href="">4</a>                       
                    </div>
                </li>
            </ul>
        </nav>
    </header>
    <script src= "js/script.js"></script>
</body>
</html>

//css 

.header__item {
    display: none;

} 

.header__item.show {
    display: block;
}

Answer 1

Тебе нужно итерировать items, а не item. items.forEach вместо item.forEach

const list = document.querySelector('.header__list'),
  items = document.querySelectorAll('.header__items'),
  item = document.querySelectorAll('.header__item');

function showItems(i) {
  item[i].classList.toggle('show');
}

list.addEventListener('click', () => {
  const target = event.target;
  if (target && target.classList.contains('header__items')) {
    items.forEach((elem, i) => {
      if (elem == target) {
        showItems(i);
      }
    });
  }
});

.header__item {
    display: none;
}
.header__item.show {
    display: block;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <header>
      <nav class="header__nav">
        <ul class="header__list">
          <li class="header__items">
            Contacts
            <div class="header__item">
              <a href="">1</a>
              <a href="">2</a>
              <a href="">3</a>
              <a href="">4</a>
            </div>
          </li>
          <li class="header__items">
            About
            <div class="header__item">
              <a href=""> 1</a>
              <a href=""> 2</a>
              <a href=""> 3</a>
              <a href=""> 4</a>
            </div>
          </li>
          <li class="header__items">
            Team
            <div class="header__item">
              <a href="">1</a>
              <a href="">2</a>
              <a href="">3</a>
              <a href="">4</a>
            </div>
          </li>
          <li class="header__items">
            Product
            <div class="header__item">
              <a href="">1</a>
              <a href="">2</a>
              <a href="">3</a>
              <a href="">4</a>
            </div>
          </li>
        </ul>
      </nav>
    </header>
  </body>
</html>

БЛОГ НА HUSL

Не работает выпадающее меню js

Ответы (1 шт):