JS下拉菜单最佳实践

Question

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

我的代码有什么本质上的错误吗？我尝试:hover通过 CSS 进行伪操作，但没有成功。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

我想您遇到的问题与我检查 codepen 时遇到的问题相同，因为 .dropbtn 与 .dropdown-content 处于同一级别，选择器.dropbtn:hover .dropdown-content将无法工作，因为它在 .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'
})