0

Подскажите пожалуйста как закрыть меню и все подменю при клике вне его области?

toggle оставить как есть, но сделать чтобы внутрение еще закрывались

За открытие меню и подменю это отвечает класс .active

Как то с проверкой чтобы оптимизация еще была

document.addEventListener('click', function(e) {
  if (e.target.closest('.sidebar-submenu > span')) {
    e.target.parentNode.classList.toggle('active');
  }
});
.sidebar {
  display: flex;
  align-items: center;
  padding: 0 8px;
  background: #fff;
  height: 35px;
  border-bottom: 1px solid #cfcfcf;
}
.sidebar-logotype {
  display: flex;
  align-items: center;
  margin: 0 40px 0 2px;
  color: #000;
  height: inherit;
}
.sidebar-logotype img {
  width: 18px;
  margin-right: 6px;
}
.sidebar-menu {
  display: flex;
  flex-wrap: wrap;
  margin-right: auto;
  height: 100%;
}
.sidebar-menu a,
.sidebar-menu span {
  color: #000;
  cursor: pointer;
  display: inline-flex;
  padding: 3px 10px;
  align-items: center;
  white-space: nowrap;
}
.sidebar-submenu span > i {
  margin: 2px 0 0 6px;
  transition: transform .1s;
}
.sidebar-submenu div span > i {
  margin-left: 10px;
}
.sidebar-submenu {
  position: relative;
  display: flex;
}
.sidebar-submenu > div {
  display: none;
}
.sidebar-submenu.active > div {
  display: block;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #fff;
  border: 1px solid #cfcfcf;
  border-radius: 3px;
  padding: 4px 0;
  min-width: 72px;
  z-index: 99;
}
.sidebar-submenu .sidebar-submenu.active > div {
  top: -3px;
  left: calc(100% + 8px);
  border: 1px solid #cfcfcf;
  border-radius: 3px;
}
.sidebar-submenu.active > div:before,
.sidebar-submenu.active > div:after {
  content: '';
  position: absolute;
}
.sidebar-submenu.active > div:before {
  top: -10px;
  left: 22px;
  border: 5px solid transparent;
  border-bottom: 5px solid #000;
}
.sidebar-submenu.active > div:after {
  top: -10px;
  left: 22px;
  border: 5px solid transparent;
  border-bottom: 5px solid #fff;
}
.sidebar-submenu .sidebar-submenu.active > div:before {
  top: 10px;
  left: -10px;
  border: 5px solid transparent;
  border-right: 5px solid #000;
}
.sidebar-submenu .sidebar-submenu.active > div:after {
  top: 10px;
  left: -10px;
  border: 5px solid transparent;
  border-right: 5px solid #fff;
}
.sidebar-menu a:hover,
.sidebar-menu span:hover,
.sidebar-submenu.active > span {
  color: #3ca4e7;
}
<div class="sidebar">
  <a href="#" class="sidebar-logotype">Logo</a>
  <div class="sidebar-menu">
    <div class="sidebar-submenu">
      <span>Menu</span>
      <div>
        <div><a href="#">Item 1</a></div>
        <div><a href="#">Item 2</a></div>
        <div class="sidebar-submenu">
          <span>Submenu</span>
          <div>
            <div><a href="#">Item 1</a></div>
            <div><a href="#">Item 2</a></div>
          </div>
        </div>
      </div>
    </div>
    <div class="sidebar-submenu">
      <span>Menu 2</span>
      <div>
        <div><a href="#">Item 1</a></div>
        <div><a href="#">Item 2</a></div>
      </div>
    </div>
  </div>
</div>

1

2 ответа 2

2

как закрыть меню и все подменю при клике вне его области?

Предложу такой вариант...

document.addEventListener('click', function(e) {
  if (e.target.closest('.sidebar-submenu > span')) {
    e.target.parentNode.classList.toggle('active');
  }
  if (!e.target.closest('.sidebar-menu')) {
    document.querySelectorAll('.sidebar-menu .active').forEach(o => {
      o.classList.remove('active')
    })
  }
});
.sidebar {
  display: flex;
  align-items: center;
  padding: 0 8px;
  background: #fff;
  height: 35px;
  border-bottom: 1px solid #cfcfcf;
}

.sidebar-logotype {
  display: flex;
  align-items: center;
  margin: 0 40px 0 2px;
  color: #000;
  height: inherit;
}

.sidebar-logotype img {
  width: 18px;
  margin-right: 6px;
}

.sidebar-menu {
  display: flex;
  flex-wrap: wrap;
  margin-right: auto;
  height: 100%;
}

.sidebar-menu a,
.sidebar-menu span {
  color: #000;
  cursor: pointer;
  display: inline-flex;
  padding: 3px 10px;
  align-items: center;
  white-space: nowrap;
}

.sidebar-submenu span>i {
  margin: 2px 0 0 6px;
  transition: transform .1s;
}

.sidebar-submenu div span>i {
  margin-left: 10px;
}

.sidebar-submenu {
  position: relative;
  display: flex;
}

.sidebar-submenu>div {
  display: none;
}

.sidebar-submenu.active>div {
  display: block;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #fff;
  border: 1px solid #cfcfcf;
  border-radius: 3px;
  padding: 4px 0;
  min-width: 72px;
  z-index: 99;
}

.sidebar-submenu .sidebar-submenu.active>div {
  top: -3px;
  left: calc(100% + 8px);
  border: 1px solid #cfcfcf;
  border-radius: 3px;
}

.sidebar-submenu.active>div:before,
.sidebar-submenu.active>div:after {
  content: '';
  position: absolute;
}

.sidebar-submenu.active>div:before {
  top: -10px;
  left: 22px;
  border: 5px solid transparent;
  border-bottom: 5px solid #000;
}

.sidebar-submenu.active>div:after {
  top: -10px;
  left: 22px;
  border: 5px solid transparent;
  border-bottom: 5px solid #fff;
}

.sidebar-submenu .sidebar-submenu.active>div:before {
  top: 10px;
  left: -10px;
  border: 5px solid transparent;
  border-right: 5px solid #000;
}

.sidebar-submenu .sidebar-submenu.active>div:after {
  top: 10px;
  left: -10px;
  border: 5px solid transparent;
  border-right: 5px solid #fff;
}

.sidebar-menu a:hover,
.sidebar-menu span:hover,
.sidebar-submenu.active>span {
  color: #3ca4e7;
}
<div class="sidebar">
  <a href="#" class="sidebar-logotype">Logo</a>
  <div class="sidebar-menu">
    <div class="sidebar-submenu">
      <span>Menu</span>
      <div>
        <div><a href="#">Item 1</a></div>
        <div><a href="#">Item 2</a></div>
        <div class="sidebar-submenu">
          <span>Submenu</span>
          <div>
            <div><a href="#">Item 1</a></div>
            <div><a href="#">Item 2</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

3
  • А подскажешь как сделать если открыто одно меню при клике на другое предыдущее закрывалось? Обновил вопрос, добавил там второе меню
    – avory
    27 янв в 9:14
  • Сделал, добавил в условие такую штуку [...document.querySelectorAll('.sidebar-submenu')].map(el => { if (e.target.parentNode != el) el.classList.remove('active') });
    – avory
    27 янв в 9:28
  • @avory, map возвращает новый массив. Если он никому далее не нужен - вернее использовать forEach, так и в массив коллекцию не нужно будет переделывать.
    – ksa
    27 янв в 12:19
1

Как вариант, вы можете вместе с меню отрисовывать прозрачную подложку на весь экран и отслеживать клик по ней, по которому будете убирать класс активности с меню

0

Ваш ответ

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

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