javascript - JS下拉菜单最佳实践

Question

我想在我的元素中实现以下微型下拉菜单。

我的代码有什么本质上的错误吗？我尝试通过 CSS 伪造 :hover 但没有成功。 JS这个东西有没有更好的办法？

document.querySelector('.dropbtn').addEventListener('mouseenter', function(){
  document.querySelector('.dropdown-content').style.visibility = 'visible'
})

document.querySelector('.dropbtn').addEventListener('mouseleave', function(){
  document.querySelector('.dropdown-content').style.visibility = 'hidden'
})

.dropdown {
  display: flex;
  align-items: flex-start;
}

.dropbtn {
    background-color: darkslategray;
    color: white;
    padding: 6px 10px 6px;
    font-size: 18px;
    border: none;
    cursor: pointer;
}

.dropdown-content {
  background-color: darkslategray;
  display: inline-grid;
  visibility: hidden;
  padding: 6px 10px 6px;
}

img {
  margin: 3px;
  height: 40px;
  width: 120px;
  border: 1px solid gray;
}

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <img src="http://fullhdpictures.com/wp-content/uploads/2016/03/Blur-Backgrounds.jpg" alt="">
    <img src="http://akveo.com/blur-admin/assets/img/blur-bg-blurred.jpg" alt="">
    <img src="http://www.publicdomainpictures.net/pictures/50000/velka/blurred-background-green.jpg" alt="">
  </div>
</div>

代码笔:https://codepen.io/HelleFl/pen/KyWYYX

Answer 1

尽管有几篇文章描述了 how to create a dropdown menu using just HTML and CSS ，但我会尽力回答您的问题。

tl;dr:使用 CSS 而不是 JS 以获得更好的性能

CSS 还是 JS？哪个更好？

基本上只要有可能，就使用 CSS 而不是 JS。有一个很棒的 SO answer about this here 。
更进一步，CSS 动画应该优先于 JS 动画，除非动画应该有一些高级效果。这方面也有很好的 google developers blog post。

如何创建下拉菜单

您可以在 here 中找到答案。基本上，您需要将 :hover 设置到包含链接和子菜单的父元素上。

li img {
  width: 120px;
  height: auto;
}

ul > li {
  display: inline;
  position: relative;
  min-width: 150px;
}

/* hide submenus by setting the max-height to 0 */
ul > li > ul {
  max-height: 0;
  overflow: hidden;
  transition: max-height .75s ease;
}

/* set max-height to an approximate height it could have */
ul > li:hover > ul {
  max-height: 300px;
}

ul.submenu {
  background: #eee;
  position: absolute;
  left: 0;
  top: 1em;
}

ul.submenu > li {
  display: block;
}

<nav>
  <ul>
    <li><a href="#">Hyperlink 1</a></li>
    <li>
      <a href="#">Hyperlink 2</a>
      <ul class="submenu">
        <li><img src="http://fullhdpictures.com/wp-content/uploads/2016/03/Blur-Backgrounds.jpg" alt=""></li>
        <li><img src="http://akveo.com/blur-admin/assets/img/blur-bg-blurred.jpg" alt=""></li>
        <li><img src="http://www.publicdomainpictures.net/pictures/50000/velka/blurred-background-green.jpg" alt=""></li>
      </ul>
    </li>
  </ul>
</nav>