javascript 中下拉菜單的一些問題

Question

我有下一個實施下拉的例子。

 let isTouchScreen = { 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 isTouchScreen.Android() || isTouchScreen.BlackBerry() || isTouchScreen.iOS() || isTouchScreen.Opera() || isTouchScreen.Windows(); }, }; let body = document.querySelector('body'); if(isTouchScreen.any()) { body.classList.add('touch'); link = document.querySelectorAll('nav a'); link.forEach(function(index) { index.addEventListener('click', function() { let arrow = index.nextElementSibling; let menu = arrow.nextElementSibling; arrow.classList.toggle('active'); menu.classList.toggle('open'); }); }); } else { body.classList.add('mouse'); }

 *, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; border: 0; } body { font-family: Arial, sans-serif; font-size: 1em; min-height: 100vh; line-height: 1; color: #fff; }.menu { background: #181818; }.menu a { display: block; text-decoration: none; white-space: nowrap; min-width: 150px; background: #181818; padding: 10px 20px; color: #a4a6a7; }.menu a:hover { background: #cd412b; color: #fff; }.menu li { position: relative; list-style: none; }.menu__list { display: flex; }.sub-menu__list { position: absolute; top: auto; left: 0; display: none; }.sub-sub-menu__list { position: absolute; top: 0; left: 100%; display: none; }.arrow { position: absolute; top: 12px; right: 20px; display: none; background: url('../images/select.svg'); height: 8px; width: 12px; cursor: pointer; }.arrow.active { transform: rotate(-180deg); } body.mouse.menu__list > li:hover.sub-menu__list { display: block; } body.mouse.sub-menu__list > li:hover.sub-sub-menu__list { display: block; } body.touch.sub-menu__list.open { display: block; } body.touch.sub-sub-menu__list.open { display: block; } body.touch.arrow { display: block; } @media (max-width: 768px) {.arrow { display: block; }.menu__list { display: block; }.sub-menu__list { position: relative; top: 0; left: 0; }.sub-sub-menu__list { position: relative; top: 0; left: 0; } }

 <nav class="menu"> <ul class="menu__list"> <li> <a href="#" class="menu__link">First level</a> <span class="menu__arrow arrow"></span> <ul class="sub-menu__list"> <li><a href="#" class="sub-menu__link">Second level</a></li> <li><a href="#" class="sub-menu__link">Second level</a> <span class="sub-menu__arrow arrow"></span> <ul class="sub-sub-menu__list"> <li><a href="#" class="sub-sub-menu__link">Third level</a></li> <li><a href="#" class="sub-sub-menu__link">Third level</a></li> <li><a href="#" class="sub-sub-menu__link">Third level</a></li> <li><a href="#" class="sub-sub-menu__link">Third level</a></li> </ul> </li> <li><a href="#" class="sub-menu__link">Second level</a></li> <li><a href="#" class="sub-menu__link">Second level</a></li> </ul> </li> <li><a href="#" class="menu__link">First level</a></li> <li> <a href="#" class="menu__link">First level</a> <span class="menu__arrow arrow"></span> <ul class="sub-menu__list"> <li><a href="#" class="sub-menu__link">Second level</a></li> <li><a href="#" class="sub-menu__link">Second level</a> <span class="sub-menu__arrow arrow"></span> <ul class="sub-sub-menu__list"> <li><a href="#" class="sub-sub-menu__link">Third level</a></li> <li><a href="#" class="sub-sub-menu__link">Third level</a></li> <li><a href="#" class="sub-sub-menu__link">Third level</a></li> <li><a href="#" class="sub-sub-menu__link">Third level</a></li> </ul> </li> <li><a href="#" class="sub-menu__link">Second level</a></li> <li><a href="#" class="sub-menu__link">Second level</a></li> </ul> </li> </ul> </nav>

接下來的問題與小於 767px 的屏幕有關。

在瀏覽器中，當我通過鼠標在鏈接上使用 hover 時，我實際上無法訪問其中的一些（在小於 767 像素的屏幕上檢查片段）。 下一個問題是，在移動模式下，我單擊具有下拉列表的鏈接就可以了。 但是那些沒有菜單的人，當您單擊它們時，它會在控制台中出現錯誤。

Answer 1

在嘗試切換其 class 之前，您需要檢查nextElementSibling是否存在。

link.forEach(function(index) {
  index.addEventListener('click', function() {
    let arrow = index.nextElementSibling;
    if (arrow) {
      arrow.classList.toggle('active');
      let menu = arrow.nextElementSibling;
      menu.classList.toggle('open');
    }
  });
});

Answer 2

 link = document.querySelectorAll('.link'); link.forEach(function(index) { index.addEventListener('click', function() { let arrow = index.nextElementSibling; if (arrow) { arrow.classList.toggle('active'); let menu = arrow.nextElementSibling; menu.classList.toggle('open'); } }); });

 *, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; border: 0; } body { font-family: Arial, sans-serif; font-size: 1em; min-height: 100vh; line-height: 1; color: #fff; }.menu { background: #181818; }.link { display: block; text-decoration: none; white-space: nowrap; min-width: 150px; background: #181818; padding: 10px 20px; color: #a4a6a7; }.link:hover { background: #cd412b; color: #fff; }.menu li { position: relative; list-style: none; }.menu__list { display: flex; }.sub-menu__list { position: absolute; top: auto; left: 0; display: none; }.sub-sub-menu__list { position: absolute; top: 0; left: 100%; display: none; }.arrow { position: absolute; top: 12px; right: 20px; pointer-events: none; display: none; background: url('../images/select.svg'); height: 8px; width: 12px; cursor: pointer; }.arrow.active { transform: rotate(-180deg); } @media (min-width: 767px) {.menu__list > li:hover.sub-menu__list { display: block; }.sub-menu__list > li:hover.sub-sub-menu__list { display: block; } } @media (max-width: 767px) {.arrow { display: block; }.menu__list { display: block; }.menu__list, .sub-menu__list, .sub-sub-menu__list { position: relative; top: 0; left: 0; }.menu__list.open, .sub-menu__list.open, .sub-sub-menu__list.open { display: block; } }

 <nav class="menu"> <ul class="menu__list"> <li> <a href="#" class="menu__link link">First level</a> <span class="menu__arrow arrow"></span> <ul class="sub-menu__list"> <li><a href="#" class="sub-menu__link link">Second level</a></li> <li><a href="#" class="sub-menu__link link">Second level</a> <span class="sub-menu__arrow arrow"></span> <ul class="sub-sub-menu__list"> <li><a href="#" class="sub-sub-menu__link link">Third level</a></li> <li><a href="#" class="sub-sub-menu__link link">Third level</a></li> <li><a href="#" class="sub-sub-menu__link link">Third level</a></li> <li><a href="#" class="sub-sub-menu__link link">Third level</a></li> </ul> </li> <li><a href="#" class="sub-menu__link link">Second level</a></li> <li><a href="#" class="sub-menu__link link">Second level</a></li> </ul> </li> <li><a href="#" class="menu__link link">First level</a></li> <li> <a href="#" class="menu__link link">First level</a> <span class="menu__arrow arrow"></span> <ul class="sub-menu__list"> <li><a href="#" class="sub-menu__link link">Second level</a></li> <li><a href="#" class="sub-menu__link link">Second level</a> <span class="sub-menu__arrow arrow"></span> <ul class="sub-sub-menu__list"> <li><a href="#" class="sub-sub-menu__link link">Third level</a></li> <li><a href="#" class="sub-sub-menu__link link">Third level</a></li> <li><a href="#" class="sub-sub-menu__link link">Third level</a></li> <li><a href="#" class="sub-sub-menu__link link">Third level</a></li> </ul> </li> <li><a href="#" class="sub-menu__link link">Second level</a></li> <li><a href="#" class="sub-menu__link link">Second level</a></li> </ul> </li> </ul> </nav>

好的，我做得很好，如果有人需要 - 歡迎您。