下拉菜单 Mouseleave 事件应忽略子元素

Question

I was fooling around and trying to build the same dropdown menu as Google uses on this page: https://developers.google.com/maps/documentation

I have an issue where the drop menu closes when the mouse leaves the parent nav element for the dropdown menu. What can I do to improve this? Item 3 in my example contains the dropdown menu. This is just a practice snippet. I'm in no rush to complete it.

 (function() { const parentNav = document.querySelector('.parent-nav'); const dropdown = document.querySelector('.dropdown'); parentNav.addEventListener('mouseenter', function(e) { menuTransition(); this.classList.add('dropdown-open'); }); parentNav.addEventListener('mouseleave', function(e) { menuTransition(); this.classList.remove('dropdown-open'); }); function menuTransition() { const dropDownContent = document.querySelector('.dropdown-content'); dropDownContent.classList.add('dropdown-transition'); setTimeout(function() { dropDownContent.classList.remove('dropdown-transition'); }, 500); } })();

 #nav { align-items: center; background: #1d0e96; display: flex; height: 60px; position: relative; width: 100%; } #nav ul { align-items: center; display: flex; height: 100%; list-style: none; margin: 0; padding: 0; } #nav li { height: 100%; position: relative; } #nav a { align-items: center; color: #fff; display: flex; height: 100%; padding: 10px 20px; text-decoration: none; } #nav a:hover { background: #10075d; }.dropdown { display: block; left: -169px; overflow: hidden; pointer-events: none; position: absolute; top: 100%; width: 100vw; }.dropdown-content { background: #ddd; display: flex; flex-direction: column; padding: 10px 25px; pointer-events: none; transform: translate3d(0, -100%, 0); transition: transform 0s; }.dropdown-transition { transition: transform.5s; }.dropdown-open.dropdown-content { transform: translate3d(0, 0, 0); }

 <nav id="nav"> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li class="parent-nav"> <a href="#">Item 3</a> <div class="dropdown"> <div class="dropdown-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet dictum leo. Pellentesque pulvinar consectetur ante ac finibus. Suspendisse dictum orci nec condimentum luctus. Sed semper lectus a quam placerat vestibulum. Vestibulum luctus sem at tincidunt vehicula. Mauris nec sapien aliquam, maximus arcu ac, condimentum diam. Cras mattis dui quis posuere bibendum. Cras venenatis semper purus, nec suscipit nulla placerat in. Fusce tincidunt pretium vulputate. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris eu libero iaculis, facilisis ex cursus, mollis ipsum. Suspendisse nec libero accumsan, gravida nibh sed, blandit nibh. Suspendisse nec turpis imperdiet, vehicula justo nec, auctor mi.</p> </div> </div> </li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> <li><a href="#">Item 6</a></li> </ul> </nav>

Here's my JSFiddle link: https://jsfiddle.net/fsv75dkh/

Answer 1

I added pointer-events: all to the .dropdown-content element, then added in the following to the CSS:

.parent-nav:hover .dropdown-content {
   transform: translate3d(0, 0, 0);
}

With that, I no longer need any of the JavaScript.