0

Имеется выпадающее подменю. Открывается по клику на второй пункт меню, закрывается по клику на него же, либо на любое пространство, кроме самого выпавшего подменю. Чтобы подменю закрывалось по клику вне его, пришлось запретить всплытие при его открытии, иначе оно открывалось и мгновенно закрывалось. Можно ли как то это реализовать не запрещая всплытие?

let subMenuShow = document.querySelector('.menu li:nth-child(2)');
let subMenu = document.querySelector('.sub-menu');

// Открыть подменю
let SwitchMenu = function() {
  subMenu.classList.toggle('open');
  event.stopPropagation();
};

subMenuShow.addEventListener("click", SwitchMenu);


// Закрыть подменю
function menuClose() {
  subMenu.classList.remove('open');
}

function menuCloseClickOutside(e) {
  if (!e.target.matches('.sub-menu, .sub-menu *')) {
    menuClose();
  };
};

document.addEventListener('click', menuCloseClickOutside);
document.addEventListener('touchstart', menuCloseClickOutside);

1 ответ 1

3

Непонятно, зачем вообще хардкодить индекс элемента меню.

Можно решить задачу очень просто, и относительно гибко:

document.addEventListener('DOMContentLoaded', () => {
  document.body.addEventListener('click', e => {
    const lastChild = e.target.lastElementChild; 
    if (lastChild && lastChild.matches('.menu.sub'))
      return (e.target.classList.toggle('active'), undefined); 
    for (const mi of document.querySelectorAll('.menu > li'))
      mi.classList.remove('active'); 
  });
});
html, body { height: 100%; font-family: sans-serif; }
.menu { list-style: none; font-size: 0; padding: 0; white-space: nowrap; }
  .menu > li { position: relative; display: inline-block; padding: 0.5em; font-size: 1rem; box-shadow: 0 0 0 1px #777; user-select: none; cursor: pointer; }
  .menu > li + li { margin-left: 1px; }
.menu.sub { position: absolute; top: 100%; left: 0; display: none; width: 100%; }
  .menu.sub > li { margin-top: 1px; }
.menu > li.active { background: #def; }
.menu > li.active > .menu.sub { display: inline-block; }
<ul class="menu">
  <li>flat</li>
  <li>with submenu
    <ul class="menu sub">
      <li>flat</li>
      <li>flat</li>
      <li>with submenu
        <ul class="menu sub">
          <li>flat</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>flat</li>
  <li>flat</li>
</ul>

Ваш ответ

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

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