0

Помогите пожалуйста разобраться. Необходимо проверить наличие класса _active у элементов и удалить в случае наличия. На этом классе завязано появление многоуровневого меню на сайте. После закрытия основной ветки меню, если была открыта дочерняя, то у дочерней не пропадает класс _active:

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
  document.body.classList.add('_touch');
  let menuArrows = document.querySelectorAll('.menu__arrow');
  if (menuArrows.length > 0) {
    for (var i = 0; i < menuArrows.length; i++) {
      const menuArrow = menuArrows[i];
      menuArrow.addEventListener("click", function(e) {
        menuArrow.parentElement.classList.toggle('_active');
      });
    }
  }
} else {
  document.body.classList.add('_pc');
}
.menu__list {}

.menu__list>li {
  position: relative;
  margin: 0px 0px 0px 20px;
}

.menu__link {
  color: #fff;
  font-size: 18px;
}

.menu__link:hover {
  text-decoration: underline;
}

.menu__sub-list {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #000;
  padding: 15px;
  min-width: 10.6rem;
}

.menu__sub-list li {
  margin: 0px 0px 10px 0px;
  display: flex;
  align-items: center;
  position: relative;
}

.menu__sub-list li:last-child {
  margin: 0;
}

.menu__sub-link {
  color: #fff;
}

.menu__sub-link:hover {
  text-decoration: underline;
}

.menu__arrow {
  display: none;
}

.menu__sub-sub-list {
  position: absolute;
  top: 0;
  left: 100%;
  padding: 0px 1.1rem;
}

.menu__sub-sub-list>li {
  background-color: #fff;
  margin: 0;
  padding: 0.5rem 0px;
}

.menu__sub-sub-link {
  color: #000;
}

/*---------------------PC---------------------*/

body._pc .menu__list>li:hover .menu__sub-list {
  opacity: 1;
  visibility: visible;
  transform: translate(0px, 0px);
  pointer-events: all;
}

body._pc .menu__sub-list>li:hover .menu__sub-sub-list {
  opacity: 1;
  visibility: visible;
  transform: translate(0px, 0px);
  pointer-events: all;
}

/*---------------------PC---------------------*/

/*---------------------TOUCH---------------------*/

body._touch .menu__list>li {
  display: flex;
  align-items: center;
}

body._touch .menu__link {
  flex: 1 1 auto;
}

body._touch .menu__arrow {
  display: flex;
  /* width: 0; */
  /* height: 0; */
  margin: 0px 0px 0px 5px;
  transition: transform 0.3s ease 0s;
  background-color: #ffffff00;
  border: 1px solid #fcf9f9;
  text-align: center;
  padding: 0px 0.3rem;
  font-size: 1.3rem;
}

body._touch .menu__list>li._active .menu__sub-list {
  opacity: 1;
  visibility: visible;
  transform: translate(0px, 0px);
  pointer-events: all;
}

body._touch .menu__list>li._active .fa-angle-down {
  transform: rotate(-180deg);
  transition: transform 0.3s ease 0s;
  color: #1b1a1a;
}

body._touch .menu__list>li .fa-angle-down {
  transform: rotate(0deg);
  transition: transform 0.3s ease 0s;
  color: #f9f3f2;
}

body._touch .menu__sub-list>li._active .menu__sub-sub-list {
  opacity: 1;
  visibility: visible;
  transform: translate(0px, 0px);
  pointer-events: all;
}

body._touch .menu__sub-list>li._active .fa-angle-right {
  transform: rotate(-180deg);
  transition: transform 0.3s ease 0s;
  color: #3e71ee;
}

body._touch .menu__sub-list>li .fa-angle-right {
  transform: rotate(0deg);
  transition: transform 0.3s ease 0s;
  color: #f9f3f2;
}

/*---------------------TOUCH---------------------*/

@media (min-width: 767px) {

  /*больше 767*/
  .menu__list {
    display: flex;
    align-items: center;
  }

  .menu__list>li {
    padding: 10px 0;
  }

  .menu__sub-list {
    transform: translate(0px, 10%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease 0s;
  }

  .menu__sub-sub-list {
    transform: translate(0px, 10%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease 0s;
  }
}


@media (max-width: 767px) {
  .menu__icon {
    z-index: 5;
    display: block;
    position: relative;
    width: 30px;
    height: 18px;
    cursor: pointer;
  }

  .menu__icon span,
  .menu__icon::before,
  .menu__icon::after {
    left: 0;
    position: absolute;
    height: 10%;
    width: 100%;
    transition: all 0.3s ease 0s;
    background-color: #fff;
  }

  .menu__icon::before,
  .menu__icon::after {
    content: "";
  }

  .menu__icon::before {
    top: 0;
  }

  .menu__icon::after {
    bottom: 0;
  }

  .menu__icon span {
    top: 45%;
    transform: scale(1) translate(0px -45%);
  }

  .menu__icon._active span {
    transform: scale(0) translate(0px, -45%);
  }

  .menu__icon._active::before {
    top: 45%;
    transform: rotate(-45deg) translate(0px, -50%);
  }

  .menu__icon._active::after {
    bottom: 45%;
    transform: rotate(45deg) translate(0px, -50%);
  }

  .menu__body {
    position: fixed;
    top: 0;
    left: 100%;
    /*100%-выезжает справа\\-100%-выезжает слева*/
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    padding: 100px 30px 30px 30px;
    transition: left 0.3s ease 0s;
    overflow: auto;
  }

  .menu__body._active {
    left: 0;
  }

  .menu__body::before {
    content: "";
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    height: 70px;
    background-color: #912105;
    z-index: 2;
  }

  .menu__list>li {
    flex-wrap: wrap;
    margin: 0px 0px 4rem 0px;
  }

  .menu__list>li:last-child {
    margin: 0;
  }

  .menu__list>li._active .menu__sub-list {
    display: block;
  }

  .menu__link {
    font-size: 3.5rem;
  }

  .menu__sub-list {
    position: relative;
    background-color: #fff;
    flex: 1 1 100%;
    margin: 3rem 0px 0px 0px;
    display: none;
  }

  .menu__sub-link {
    font-size: 3rem;
    color: #000;
  }
}
<nav class="menu__body">
  <ul class="menu__list">
    <li>
      <a href="" class="menu__link">Раздел 1</a>
      <button class="menu__arrow"><i class="fas fa-angle-down"></i></button>
      <ul class="menu__sub-list">
        <li>
          <a href="" class="menu__sub-link">Под Раздел 1</a>
        </li>
        <li>
          <a href="" class="menu__sub-link">Под Раздел 2</a>
          <button class="menu__arrow"><i class="fas fa-angle-right"></i></button>
          <ul class="menu__sub-sub-list">
            <li>
              <a href="" class="menu__sub-sub-link">Под под раздел 1</a>
            </li>
            <li>
              <a href="" class="menu__sub-sub-link">Под под раздел 2</a>
            </li>
            <li>
              <a href="" class="menu__sub-sub-link">Под под раздел 3</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="" class="menu__sub-link">Под Раздел 3</a>
        </li>
      </ul>
    </li>
    <li><a href="" class="menu__link">Раздел 2</a></li>
    <li><a href="" class="menu__link">Раздел 3</a></li>
    <li><a href="" class="menu__link">Раздел 4</a></li>
    <li><a href="" class="menu__link">Раздел 5</a></li>
    <li><a href="" class="menu__link">Раздел 6</a></li>
  </ul>
</nav>

Меню нужно для тач экранов. По кнопке рядом с текстом оно открывается, но получается так, что если меню открывается во второй раз, то там уже сразу открыто подменю, т.к. он с классом _active.

1 ответ 1

1

Используйте делегирование. Например повесьте слушатель события на .menu__body и у него проверяйте, произошел ли клик на .menu__arrow и какое он имеет отношение к определенному родителю, через contains. А так же используйте вместо classList.toggle - classList.remove

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.