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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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