0

Как сделать так чтобы mouseleave не распространялся на элемент .menu?

let link = document.querySelector('.link');
let dropMenu = document.querySelector('.drop-menu');

link.addEventListener("mouseenter", function () {
  setTimeout(() => {
    dropMenu.classList.remove('dn');
  }, 500);
});

link.addEventListener("mouseleave", function () {
  dropMenu.classList.add('dn');
});
.wrapper {
  position: relative;
}

.drop-menu {
  position: absolute;
  width: 100%;
  max-width: 400px;
  background: blue;
  top: 60px;
}

.dn {
  display: none;
}

.menu {
  display: flex;
  flex-direction: row;
  list-style: none;
  padding: 0;
  border: 1px solid #000;
  max-width: 500px;
}

.menu a {
  padding: 10px
}
<div class="container">
  <div class="wrapper">
    <a href="/" class="link">Каталог</a>
      <div class="drop-menu dn">
             <ul>
             <li>Элемент 1</li>
             <li>Элемент 2</li>
             <li>Элемент 3</li>
           </ul>
      </div>
  </div>
   <div class="menu">
       <a href="/">О компании</a>
       <a href="/">Доставка</a>
       <a href="/">Контакты</a>
   </div>
</div>

7
  • Повесить обработчик с preventDefault 26 дек 2022 в 14:38
  • Не очень понял куда именно добавить preventDefault, можете показать на моем примере?
    – npinex
    26 дек 2022 в 15:58
  • @npinex, если drop-menu появляется при "наведении" на link - какую роль тогда играет собственно menu?
    – ksa
    26 дек 2022 в 16:18
  • @ksa два разных меню с разным контентом
    – npinex
    26 дек 2022 в 16:42
  • @npinex Могли бы Вы уточнить какого поведения Вы ожидаете от кода? Что он должен делать? И что не получается?
    – Andrei
    26 дек 2022 в 16:59

1 ответ 1

1

Можно вот так это реализовать:

let link = document.querySelector('#w-link');
let dropMenu = document.querySelector('.drop-menu');

link.addEventListener("mouseenter", function() {
  setTimeout(() => {
    dropMenu.classList.remove('dn');
  }, 500);
});

link.addEventListener("mouseleave", function() {
  dropMenu.classList.add('dn');
});

// Отменяем переход по ссылке "Каталог"
document.querySelector('#a-link')
  .addEventListener('click', e => {
    e.preventDefault();
  });
.wrapper {
  position: absolute;
  top: 5px;
}

.drop-menu {
  margin-top: 50px;
  width: 100%;
  max-width: 400px;
  background: blue;
  padding: 5px 15px 5px 0;
  color: white;
}

.dn {
  display: none;
}

.menu {
  display: flex;
  flex-direction: row;
  list-style: none;
  padding: 0;
  border: 1px solid #000;
  max-width: 500px;
  margin-top: 30px;
}

.menu a {
  padding: 10px
}
<div class="container">
  <div class="wrapper" id="w-link">
    <a href="/" class="link" id="a-link">Каталог</a>
    <div class="drop-menu dn">
      <ul>
        <li>Элемент 1</li>
        <li>Элемент 2</li>
        <li>Элемент 3</li>
      </ul>
    </div>
  </div>
  <div class="menu">
    <a href="/">О компании</a>
    <a href="/">Доставка</a>
    <a href="/">Контакты</a>
  </div>
</div>

Открытие по клику:

let link = document.querySelector('#w-link');
let dropMenu = document.querySelector('#drop-menu');

document.querySelector('#a-link')
  .addEventListener('click', e => {
    e.preventDefault();
    if (dropMenu.classList.contains('dn')) {
      setTimeout(() => {
        dropMenu.classList.remove('dn');
      }, 300);
    } else {
      dropMenu.classList.add('dn');
    }
  });
.wrapper {
  position: absolute;
  top: 5px;
}

.drop-menu {
  display: inline-block;
  max-width: 400px;
  background: blue;
  padding: 5px 20px 5px 0;
  color: white;
  margin-top: 3px;
}

.dn {
  display: none;
}

.menu {
  display: flex;
  flex-direction: row;
  list-style: none;
  padding: 0;
  border: 1px solid #000;
  max-width: 500px;
  margin-top: 30px;
}

.menu a {
  padding: 10px
}
<div class="container">
  <div class="wrapper" id="w-link">
    <a href="/" class="link" id="a-link">Каталог</a>

  </div>
  <div class="menu">
    <a href="/">О компании</a>
    <a href="/">Доставка</a>
    <a href="/">Контакты</a>
  </div>
  <div class="drop-menu dn" id="drop-menu">
    <ul>
      <li>Элемент 1</li>
      <li>Элемент 2</li>
      <li>Элемент 3</li>
    </ul>
  </div>
</div>

2
  • Когда синий блок отображается, то из-за верхнего отступа ссылки О компании, доставка и контакты не кликабельны к сожалению, возможно это исправить?
    – npinex
    26 дек 2022 в 18:39
  • @npinex Возможно исправить если только менюшка будет открываться не при наведении, а при клике. Но довольно странная ситуация когда пользователь открывает верхнее меню, а кликает совершенно по другому нижнему меню. Добавил в ответ код появление по клику, не мешает другому меню.
    – Andrei
    26 дек 2022 в 19:49

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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