Код подменю ломает работу остального кода

Question

Код подменю ломает работу остального кода

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

Всем привет!

Столкнулся с совершенно неожиданной (для меня, новичка) проблемой.

Есть страница, где все работает, как должно. Клик на ссылку меню плавно скроллит к нужному разделу. Понадобилось в один из пунктов меню добавить подпункты.

Сам код меню (html, css, js) взял из предыдущего проекта, где подменю нормально работает. Но когда я добавляю код html для подменю, оно - подменю - просто не показывается.

Все ломается при добавлении именно фрагмента html кода, если html не менять, добавить только css для подменю, все работает (естественно меняются стили). При этом добавляемый html код простой, не представляю, как он может создавать проблемы...

Пожалуйста, подскажите в чем проблема, как невинный html код может так все портить?

PS Названия классов в html, css, js проверил несколько раз - совпадают. Но, может, глаз замылился... Но я проверял

Исходный код:

HTML

<div class="menuWraper">
    <div class="upperPannel">
        <div class="menuContainer">
        <img src="" id="logo" alt="logo">
            <div class="upperMenu menu">
                <div class="menuIcon">
                    <span></span>
                </div>
            <nav class="menuBody">
                <ul class="menuList">
                    <li><a data-goto=".page__section_1" href="#" class="menuLink">ACCUEIL</a>
                    </li>
                    <li><a data-goto=".page__section_2" href="#" class="menuLink">SERVICES</a>
                    </li>
                    <li><a data-goto=".page__section_3" href="#" class="menuLink">BONS PLANS</a>
                    </li>
                    <li><a data-goto=".page__section_3" href="#" class="menuLink">ACTUALITES</a>
                    </li>
                    <li><a data-goto=".page__section_3" href="#" class="menuLink">CONTACT</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>
</div>

CSS

.menuWraper {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 50;
}
.upperPannel {
    margin: 0 auto;
    max-width: 1200px;
    background-color: #9fe8d6;
}
.menuContainer {
    max-width: 1200px;
    margin: 0px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 70px;
}
.menuIcon {
    display: none;
}
.menuList > li {
    position: relative;
    margin: 0px 20px 0px 10px;
    width: fit-content;
}
.menuLink {
    color: #000;
    font-size: 1.3rem;
}
.menuLink:hover {
    text-decoration: none;
}
.menuSubList {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #000;
    padding: 15px;
    min-width: 200px;
}
.menuSubList li {
    margin: 0px 0px 10px 0px;
}
.menuSubList li:last-child {
    margin: 0;
}
.menuSubLink {`
    color: #fff;
}
.menuSubLink:hover {
    text-decoration: underline;
}
.menuArrow {
    display: none;
}
/* ----------------------- */
body._pc .menuList > li:hover .menuSubList {
    opacity: 1;
    visibility: visible;
    transform: translate(0px, 0px);
    pointer-events: all;
}
body._touch .menuList > li {
    display: flex;
    align-items: center;
}
body._touch .menuLink {
    flex: 1 1 auto;
}
body._touch .menuArrow {
    display: block;
    width: 0;
    height: 0;
    margin: 0px 0px 0px 5px;
    transition: transform 0.3s ease 0s;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #000;
}
body._touch .menuList > li._active .menuSubList {
    opacity: 1;
    visibility: visible;
    transform: translate(0px, 0px);
    pointer-events: all;
}
body._touch .menuList > li._active .menuArrow {
    transform: rotate(-180deg);
}
/* ----------------------- */
@media (min-width: 767px) {
    .menuList {
        display: flex;
        align-items: center;
    }
    .menuList > li {
        padding: 10px 0;
    }
    .menuSubList {
        transform: translate(0px, 10%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: all 0.3s ease 0s;
    }
}
@media (max-width: 767px) {
    .menuIcon {
        z-index: 5;
        display: block;
        position: relative;
        width: 30px;
        height: 18px;
        cursor: pointer;
        margin-left: 10px;
    }
    .menuIcon span,
    .menuIcon::before,
    .menuIcon::after {
        left: 0;
        position: absolute;
        height: 10%;
        width: 100%;
        transition: all 0.3s ease 0s;
        background-color: #000;
    }
    .menuIcon::before,
    .menuIcon::after {
        content: "";
    }
    .menuIcon::before {
        top: 0;
    }
    .menuIcon::after {
        bottom: 0;
    }
    .menuIcon span {
        top: 50%;
        transform: scale(1) translate(0px, -50%);
    }
    .menuIcon._active span {
        transform: scale(0) translate(0px, -50%);
    }
    .menuIcon._active::before {
        top: 50%;
        transform: rotate(-45deg) translate(0px, -50%);
    }
    .menuIcon._active::after {
        bottom: 50%;
        transform: rotate(45deg) translate(0px, 50%);
    }
    .menuBody {
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background-color: #9fe8d6;
        padding: 100px 30px 30px 30px;
        transition: left 0.3s ease 0s;
        overflow: auto;
    }
    .menuBody._active {
        left: 0;
    }
    .menuBody::before {
        content: "";
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        height: 70px;
        background-color: #9fe8d6;
        z-index: 20;
    }
    .menuList > li {
        flex-wrap: wrap;
        margin: 0px 0px 30px 0px;
    }
    .menuList > li:last-child {
        margin-bottom: 0;
    }
    .menuList > li._active .menuSubList {
        display: block;
    }
    .menuLink {
        font-size: 24px;
    }
    .menuSubList {
        position: relative;
        background-color: #fff;
        flex: 1 1 100%;
        margin: 20px 0px 0px 0px;
        display: none;
    }
    .menuSubLink {
        font-size: 20px;
        color: #000;
    }

JS

// USER SYSTEM AND BROWSER CHECK
const isMobile = {
    Android: function () {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function () {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function () {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function () {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function () {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function () {
        return (
            isMobile.Android() ||
            isMobile.BlackBerry() ||
            isMobile.iOS() ||
            isMobile.Opera() ||
            isMobile.Windows());
    }
};
    
// BODY CLASS CHANGE FOR MOBILE DEVICES
if (isMobile.any()) {
    document.body.classList.add('_touch');
    
let menuArrows = document.querySelectorAll('.menuArrow');

if (menuArrows.length > 0) {
    for (let index = 0; index < menuArrows.length; index++) {
        const menuArrow = menuArrows[index];
        menuArrow.addEventListener("click", function (e) {
        menuArrow.parentElement.classList.toggle('_active');
        });
    }
}
    
    } else {
        document.body.classList.add('_pc');
    }
    
// ACTIVE MENU LINK DECORATION
let activeLinks = document.querySelectorAll('.menuLink');
    
for (let i = 0; i < activeLinks.length; i++) {
    activeLinks[i].addEventListener('click', function() {
    let current = document.getElementsByClassName('active');
    
    if (current.length > 0) {
        current[0].className = current[0].className.replace(' active', '');
    }
    
    this.className += ' active';
    });
} 
    
// BURGER MENU
const iconMenu = document.querySelector('.menuIcon');
const menuBody = document.querySelector('.menuBody');
if (iconMenu) {
    iconMenu.addEventListener("click", function (e) {
        document.body.classList.toggle('_lock');
        iconMenu.classList.toggle('_active');
        menuBody.classList.toggle('_active');
    });
}
    
// SMOOTH SCROLLING WHEN CLICKING THE MENU LINK
const menuLinks = document.querySelectorAll('.menuLink[data-goto]');
if (menuLinks.length > 0) {
    menuLinks.forEach(menuLink => {
    menuLink.addEventListener("click", onMenuLinkClick);
});
    
    function onMenuLinkClick(e) {
        const menuLink = e.target;
        if (menuLink.dataset.goto && document.querySelector(menuLink.dataset.goto)) {
            const gotoBlock = document.querySelector(menuLink.dataset.goto);
            const gotoBlockValue = gotoBlock.getBoundingClientRect().top + scrollY -        document.querySelector('.menuContainer').offsetHeight;
    
        if (iconMenu.classList.contains('_active')) {
            document.body.classList.remove('_lock');
            iconMenu.classList.remove('_active');
            menuBody.classList.remove('_active');
        }
    
            window.scrollTo({
                top: gotoBlockValue,
                behavior: "smooth"
        });
                e.preventDefault();
            }
        }
    }

Добавляемый (к пункту меню services) фрагмент html кода:

<span class="menuArrow"></span>
   <ul class="menuSubList">
      <li>
         <a href="bijoux/broche/broche.html" class="menuSubLink">Broches</a>
      </li>
      <li>
      <a href="bijoux/boucles_d_oreilles/boucles_d_oreilles.html" class="menuSubLink">Boucles d'oreilles</a>
      </li>
      <li>
          <a href="bijoux/collier_pendetif/collier_pendetif.html" class="menuSubLink">Colliers et pendetifs</a>
      </li>
      <li>
          <a href="" class="menuSubLink">Epingles</a>
      </li>
      <li>
          <a href="" class="menuSubLink">Bagues</a>
      </li>
      <li>
          <a href="" class="menuSubLink">Parures</a>
      </li>
      <li>
          <a href="" class="menuSubLink">Bracelets</a>
      </li>
      <li>
          <a href="" class="menuSubLink">Pendentifes</a>
      </li>
      </ul>

css html меню

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

Answer 1

▲ 4Принят

Копируйте внимательнее: одна пропущенная скобка - час поиска (для отвечающих тоже ;-)
Думаю, что апостроф здесь лишний:
```
.menuSubLink {`
    color: #fff;
}
```
Странный блок:
```
for (let i = 0; i < activeLinks.length; i++) {
    activeLinks[i].addEventListener('click', function() {
    let current = document.getElementsByClassName('active');

    if (current.length > 0) {
        current[0].className = current[0].className.replace(' active', '');
    }

    this.className += ' active';
    });
}
```
У Вас имена всех управляющих классов начинаются с символа подчёркивания, а в этом блоке не так. Опечатка?

К тому же, что это за манипуляции с className: className.replace(' active', '') и this.className += ' active' ? Это же просто добавление/удаление класса, так? Ну и используйте, как в остальном коде, classList.add/remove.

Не совсем ясен момент с "Все ломается..." Возможно, что есть ещё что-то, но сейчас подменю появляется:

// USER SYSTEM AND BROWSER CHECK
const isMobile = {
  Android: function() {
    return navigator.userAgent.match(/Android/i);
  },
  BlackBerry: function() {
    return navigator.userAgent.match(/BlackBerry/i);
  },
  iOS: function() {
    return navigator.userAgent.match(/iPhone|iPad|iPod/i);
  },
  Opera: function() {
    return navigator.userAgent.match(/Opera Mini/i);
  },
  Windows: function() {
    return navigator.userAgent.match(/IEMobile/i);
  },
  any: function() {
    return (
      isMobile.Android() ||
      isMobile.BlackBerry() ||
      isMobile.iOS() ||
      isMobile.Opera() ||
      isMobile.Windows()
    );
  }
};

// BODY CLASS CHANGE FOR MOBILE DEVICES
if (isMobile.any()) {
  document.body.classList.add("_touch");
  let menuArrows = document.querySelectorAll(".menuArrow");
  if (menuArrows.length > 0) {
    for (let index = 0; index < menuArrows.length; index++) {
      const menuArrow = menuArrows[index];
      menuArrow.addEventListener("click", function(e) {
        menuArrow.parentElement.classList.toggle("_active");
      });
    }
  }
} else {
  document.body.classList.add("_pc");
}

// ACTIVE MENU LINK DECORATION
let activeLinks = document.querySelectorAll(".menuLink");
for (let i = 0; i < activeLinks.length; i++) {
  activeLinks[i].addEventListener("click", function() {
    let current = document.getElementsByClassName("_active");
    if (current.length > 0) {
      current[0].className = current[0].classList.remove("_active");
    }
    this.classList.add("_active");
  });
}

// BURGER MENU
const iconMenu = document.querySelector(".menuIcon");
const menuBody = document.querySelector(".menuBody");
if (iconMenu) {
  iconMenu.addEventListener("click", function(e) {
    document.body.classList.toggle("_lock");
    iconMenu.classList.toggle("_active");
    menuBody.classList.toggle("_active");
  });
}

// SMOOTH SCROLLING WHEN CLICKING THE MENU LINK
const menuLinks = document.querySelectorAll(".menuLink[data-goto]");
if (menuLinks.length > 0) {
  menuLinks.forEach((menuLink) => {
    menuLink.addEventListener("click", onMenuLinkClick);
  });
}

function onMenuLinkClick(e) {
  const menuLink = e.target;
  if (menuLink.dataset.goto && document.querySelector(menuLink.dataset.goto)) {
    const gotoBlock = document.querySelector(menuLink.dataset.goto);
    const gotoBlockValue =
      gotoBlock.getBoundingClientRect().top +
      scrollY -
      document.querySelector(".menuContainer").offsetHeight;
    if (iconMenu.classList.contains("_active")) {
      document.body.classList.remove("_lock");
      iconMenu.classList.remove("_active");
      menuBody.classList.remove("_active");
    }
    window.scrollTo({
      top: gotoBlockValue,
      behavior: "smooth"
    });
    e.preventDefault();
  }
}

.menuWraper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  width: 100%;
}

.upperPannel {
  margin: 0 auto;
  max-width: 1200px;
  background-color: #9fe8d6;
}

.menuContainer {
  margin: 0px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  max-width: 1200px;
}

.menuIcon {
  display: none;
}

.menuList>li {
  position: relative;
  margin: 0px 20px 0px 10px;
  width: fit-content;
}

.menuLink {
  font-size: 1.3rem;
  color: #000;
}

.menuLink:hover {
  text-decoration: none;
}

.menuSubList {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 200px;
  padding: 15px;
  background-color: #000;
}

.menuSubList li {
  margin: 0px 0px 10px 0px;
}

.menuSubList li:last-child {
  margin: 0;
}

.menuSubLink {
  color: #fff;
}

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

.menuArrow {
  display: none;
}


/* ----------------------- */

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

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

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

body._touch .menuArrow {
  margin: 0px 0px 0px 5px;
  display: block;
  height: 0;
  width: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid #000;
  transition: transform 0.3s ease 0s;
}

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

body._touch .menuList>li._active .menuArrow {
  transform: rotate(-180deg);
}


/* ----------------------- */

@media (min-width: 767px) {
  .menuList {
    display: flex;
    align-items: center;
  }
  .menuList>li {
    padding: 10px 0;
  }
  .menuSubList {
    transform: translate(0px, 10%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease 0s;
  }
}

@media (max-width: 767px) {
  .menuIcon {
    position: relative;
    z-index: 5;
    margin-left: 10px;
    display: block;
    height: 18px;
    width: 30px;
    cursor: pointer;
  }
  .menuIcon span,
  .menuIcon::before,
  .menuIcon::after {
    position: absolute;
    left: 0;
    height: 10%;
    width: 100%;
    background-color: #000;
    transition: all 0.3s ease 0s;
  }
  .menuIcon::before,
  .menuIcon::after {
    content: "";
  }
  .menuIcon::before {
    top: 0;
  }
  .menuIcon::after {
    bottom: 0;
  }
  .menuIcon span {
    top: 50%;
    transform: scale(1) translate(0px, -50%);
  }
  .menuIcon._active span {
    transform: scale(0) translate(0px, -50%);
  }
  .menuIcon._active::before {
    top: 50%;
    transform: rotate(-45deg) translate(0px, -50%);
  }
  .menuIcon._active::after {
    bottom: 50%;
    transform: rotate(45deg) translate(0px, 50%);
  }
  .menuBody {
    position: fixed;
    top: 0;
    left: -100%;
    height: 100%;
    width: 100%;
    padding: 100px 30px 30px 30px;
    overflow: auto;
    background-color: #9fe8d6;
    transition: left 0.3s ease 0s;
  }
  .menuBody._active {
    left: 0;
  }
  .menuBody::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    height: 70px;
    width: 100%;
    background-color: #9fe8d6;
  }
  .menuList>li {
    flex-wrap: wrap;
    margin: 0px 0px 30px 0px;
  }
  .menuList>li:last-child {
    margin-bottom: 0;
  }
  .menuList>li._active .menuSubList {
    display: block;
  }
  .menuLink {
    font-size: 24px;
  }
  .menuSubList {
    position: relative;
    margin: 20px 0px 0px 0px;
    display: none;
    flex: 1 1 100%;
    background-color: #fff;
  }
  .menuSubLink {
    font-size: 20px;
    color: #000;
  }
}

<div class="menuWraper">
  <div class="upperPannel">
    <div class="menuContainer">
      <img src="" id="logo" alt="logo">
      <div class="upperMenu menu">
        <div class="menuIcon">
          <span></span>
        </div>
        <nav class="menuBody">
          <ul class="menuList">
            <li>
              <a href="#" class="menuLink" data-goto=".page__section_1">ACCUEIL</a>
            </li>
            <li>
              <a href="#" class="menuLink" data-goto=".page__section_2">SERVICES</a>
              <span class="menuArrow"></span>
              <ul class="menuSubList">
                <li>
                  <a href="bijoux/broche/broche.html" class="menuSubLink">Broches</a>
                </li>
                <li>
                  <a href="bijoux/boucles_d_oreilles/boucles_d_oreilles.html" class="menuSubLink">Boucles d'oreilles</a>
                </li>
                <li>
                  <a href="bijoux/collier_pendetif/collier_pendetif.html" class="menuSubLink">Colliers et pendetifs</a>
                </li>
                <li>
                  <a href="#" class="menuSubLink">Epingles</a>
                </li>
                <li>
                  <a href="#" class="menuSubLink">Bagues</a>
                </li>
                <li>
                  <a href="#" class="menuSubLink">Parures</a>
                </li>
                <li>
                  <a href="#" class="menuSubLink">Bracelets</a>
                </li>
                <li>
                  <a href="#" class="menuSubLink">Pendentifes</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#" class="menuLink" data-goto=".page__section_3">BONS PLANS</a>
            </li>
            <li>
              <a href="#" class="menuLink" data-goto=".page__section_3">ACTUALITES</a>
            </li>
            <li>
              <a href="#" class="menuLink" data-goto=".page__section_3">CONTACT</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</div>

Код подменю ломает работу остального кода

Ответы