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>

Codepen：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设置为父元素，它同时包含链接和子菜单。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

＆＃13;

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

＆＃13;

Answer 3

我猜你遇到了我在检查你的codepen时遇到的同样的问题，因为.dropbtn与.dropdown-content处于同一级别，选择器.dropbtn:hover .dropdown-content因为搜索a而无法工作孩子里面.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'
})

JS下拉菜单最佳实践

3 个答案:

CSS还是JS？哪一个更好？

如何创建下拉菜单