JS下拉菜单最佳实践

Question

我想在我的项目中实现下面的小下拉菜单。

我的代码有什么固有的错误吗？我通过CSS尝试了:hover伪，但没有成功。有没有更好的方法来解决这个问题？

​

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>

​

Codepen：https://codepen.io/HelleFl/pen/KyWYYX

Answer 1

虽然有几篇文章描述了how to create a dropdown menu using just HTML and CSS，但我会尝试回答你的问题。

tl;dr:使用CSS over 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>

​

Answer 2

我猜当我检查你的代码时，你也面临着同样的问题，因为.dropbtn和.dropdown- .dropbtn:hover .dropdown-content处于同一级别，选择器.dropbtn不会工作，因为它在.dropbtn中搜索一个孩子，所以你必须使用兄弟选择器：

.dropbtn:hover ~ .dropdown-content{
  visibility: visible
}

(CSS动画效果比Javascript好)

此外，Javascript中的一个好做法是，如果要多次使用DOM元素，则将其保存到一个变量中，这样您就不必再次搜索DOM元素：

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

dropBtnDOM.addEventListener('mouseleave', function(){
    dropdownContentDom.style.visibility = 'hidden'
})

Answer 3

​

.dropdown:hover .dropbtn ~ .dropdown-content{
  visibility: visible
}

​