БЛОГ НА HUSL


Не скрывать открытое подменю при клике на него

Автор вопроса: Анастасия 

const navLinkToggle = document.querySelectorAll('.nav__link_toggle');
const navSubmenuLevelTwo = document.querySelectorAll('.nav__submenu');

for (button of navLinkToggle) {
  button.addEventListener('click', function(event) {
    event.preventDefault();
    event.stopPropagation();
    const dropdownList = event.target.nextElementSibling;
    const dropdownButton = event.target;

    if (dropdownList.classList.contains('nav__submenu_visible')) {
      dropdownList.classList.remove('nav__submenu_visible');
      dropdownButton.classList.remove('nav__link_active');
    } else {
      for (button of navLinkToggle) {
        button.classList.remove('nav__link_active');
      }
      for (list of navSubmenuLevelTwo) {
        list.classList.remove('nav__submenu_visible');
      }

      dropdownList.classList.add('nav__submenu_visible');
      dropdownButton.classList.add('nav__link_active');

      document.body.addEventListener('click', function(event) {
        dropdownButton.classList.remove('nav__link_active');
        dropdownList.classList.remove('nav__submenu_visible');
      });
    }
  });
}
body {
  height: 500px
}

a {
  text-decoration: none;
}

.nav {
  height: 66px;
  line-height: 66px;
}

.nav__list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.nav__item:not(:last-child) {
  margin-right: 20px;
}

.nav__submenu {
  position: absolute;
  display: none;
  background-color: #000;
  width: 100%;
  top: 66px;
  left: 0px;
  z-index: 9999;
}

.nav__submenu_visible {
  display: block;
}

.nav__container {
  display: block;
  position: relative;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}
<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Заголовок</title>
</head>

<body>
  <nav class="nav">
    <div class="nav__wrapper">
      <ul class="nav__list">
        <li class="nav__item">
          <a href="/index.html" class="nav__link">link</a>
        </li>
        <li class="nav__item">
          <a href="#" class="nav__link">link</a>
        </li>
        <li class="nav__item">
          <a href="#" class="nav__link">link</a>
        </li>
        <li class="nav__item nav__item_dropdown">
          <a href="/paragraph.html" class="nav__link nav__link_toggle">toggle link</a>
          <div class="nav__submenu">
            <div class="nav__container">
              <ul class="nav__listLevelTwo">
                <li class="nav__itemLevelTwo nav__itemLevelTwo_dropdown">
                  <a href="#" class="nav__linkLevelTwo nav__linkLevelTwo_toggle">1 level two</a>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li class="nav__item">
          <a href="#" class="nav__link">link</a>
        </li>
        <li class="nav__item">
          <a href="#" class="nav__link">link</a>
        </li>
        <li class="nav__item nav__item_dropdown">
          <a href="#" class="nav__link nav__link_toggle">toggle link</a>
          <div class="nav__submenu">
            <div class="nav__container">
              <ul class="nav__listLevelTwo">
                <li class="nav__itemLevelTwo nav__itemLevelTwo_dropdown">
                  <a href="#" class="nav__linkLevelTwo nav__linkLevelTwo_toggle">2 level two</a>
                </li>
              </ul>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </nav>

</body>

</html>


Источник

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

Автор решения: Денис Степанов

Исходя из вашего кода, надо просто прервать всплытие события.

navSubmenuLevelTwo.forEach(element => element.addEventListener('click', event => event.stopPropagation()))


const navLinkToggle = document.querySelectorAll('.nav__link_toggle');
const navSubmenuLevelTwo = document.querySelectorAll('.nav__submenu');

navSubmenuLevelTwo.forEach(element => element.addEventListener('click', event => event.stopPropagation()));

for (button of navLinkToggle) {
  button.addEventListener('click', function(event) {
    event.preventDefault();
    event.stopPropagation();
    const dropdownList = event.target.nextElementSibling;
    const dropdownButton = event.target;

    if (dropdownList.classList.contains('nav__submenu_visible')) {
      dropdownList.classList.remove('nav__submenu_visible');
      dropdownButton.classList.remove('nav__link_active');
    } else {
      for (button of navLinkToggle) {
        button.classList.remove('nav__link_active');
      }
      for (list of navSubmenuLevelTwo) {
        list.classList.remove('nav__submenu_visible');
      }

      dropdownList.classList.add('nav__submenu_visible');
      dropdownButton.classList.add('nav__link_active');

      document.body.addEventListener('click', function(event) {
        dropdownButton.classList.remove('nav__link_active');
        dropdownList.classList.remove('nav__submenu_visible');
      });
    }
  });
}
body {
  height: 500px
}

a {
  text-decoration: none;
}

.nav {
  height: 66px;
  line-height: 66px;
}

.nav__list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.nav__item:not(:last-child) {
  margin-right: 20px;
}

.nav__submenu {
  position: absolute;
  display: none;
  background-color: #000;
  width: 100%;
  top: 66px;
  left: 0px;
  z-index: 9999;
}

.nav__submenu_visible {
  display: block;
}

.nav__container {
  display: block;
  position: relative;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}
<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Заголовок</title>
</head>

<body>
  <nav class="nav">
    <div class="nav__wrapper">
      <ul class="nav__list">
        <li class="nav__item">
          <a href="/index.html" class="nav__link">link</a>
        </li>
        <li class="nav__item">
          <a href="#" class="nav__link">link</a>
        </li>
        <li class="nav__item">
          <a href="#" class="nav__link">link</a>
        </li>
        <li class="nav__item nav__item_dropdown">
          <a href="/paragraph.html" class="nav__link nav__link_toggle">toggle link</a>
          <div class="nav__submenu">
            <div class="nav__container">
              <ul class="nav__listLevelTwo">
                <li class="nav__itemLevelTwo nav__itemLevelTwo_dropdown">
                  <a href="#" class="nav__linkLevelTwo nav__linkLevelTwo_toggle">1 level two</a>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li class="nav__item">
          <a href="#" class="nav__link">link</a>
        </li>
        <li class="nav__item">
          <a href="#" class="nav__link">link</a>
        </li>
        <li class="nav__item nav__item_dropdown">
          <a href="#" class="nav__link nav__link_toggle">toggle link</a>
          <div class="nav__submenu">
            <div class="nav__container">
              <ul class="nav__listLevelTwo">
                <li class="nav__itemLevelTwo nav__itemLevelTwo_dropdown">
                  <a href="#" class="nav__linkLevelTwo nav__linkLevelTwo_toggle">2 level two</a>
                </li>
              </ul>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </nav>

</body>

</html>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.