如何使用 vanillaJS 创建自定义 select？

Question

我必须用 VanillaJS 做这样的导航栏。

样式和项目已设置，但在内部元素上移动鼠标时无法使下拉菜单保持打开状态。 移出按钮后，它会关闭。

这是期望的结果： gif

 const categoriesLink = document.querySelector('.categories__link'); const categoriesList = document.querySelector('.categories__wrapper'); function categoriesVisible() { categoriesList.style.display = 'block'; } function categoriesHidden() { categoriesList.style.display = 'none'; } categoriesLink.addEventListener('mouseover', categoriesVisible); categoriesLink.addEventListener('mouseout', categoriesHidden);

 .header__nav { display: flex; justify-content: center; align-items: center; height: 100vh; }.nav { position: relative; }.categories__link { color: #000000; cursor: pointer; }.categories__link:hover { color: #2F80ED; }.categories__wrapper { display: none; position: absolute; top: 30px; left: -100px; }.categories__content { position: relative; box-shadow: 0px 0px 4px #BDBDBD; border-radius: 5px; background: #FFFFFF; }.categories__content::after { z-index: -10; content: ""; position: absolute; width: 0; height: 0; top: -5px; left: 50%; border: 5px solid transparent; transform-origin: 0 0; transform: rotate(45deg); box-shadow: 0px 0px 4px #BDBDBD; }.categories__content::before { z-index: 10; content: ""; position: absolute; width: 0; height: 0; top: -5px; left: 50%; border: 5px solid #fff; transform-origin: 0 0; transform: rotate(45deg); }.categories__list { display: flex; padding: 14px 30px; }.list__link { line-height: 150%; color: #000000; }.list__link:hover { color: #2F80ED; }

 <div class="header__nav"> <nav class="nav"> <span class="categories__link">Categories</span> <div class="categories__wrapper"> <div class="categories__content"> <div class="categories__list"> <ul class="left__list"> <li><a class="list__link" href="" #>Sport</a></li> <li><a class="list__link" href="" #>World</a></li> <li><a class="list__link" href="" #>Covid</a></li> <li><a class="list__link" href="" #>Business</a></li> </ul> <ul class="right__list"> <li><a class="list__link" href="" #>Politics</a></li> <li><a class="list__link" href="" #>Sciense</a></li> <li><a class="list__link" href="" #>Religion</a></li> <li><a class="list__link" href="" #>Health</a></li> </ul> </div> </div> </div> </nav> <div class="header__burger"> <span></span> </div> </div>

我在 Codepen 上的代码https://codepen.io/sennarion/pen/dyRKBxK

Answer 1

如果你可以改变 css 和 html，你可以这样做：

先把javascript丢掉，在css中加入以下内容：

.nav__item {
    position: relative;
}

.nav__item:hover > .categories__wrapper {
  display: block;
}

然后将 top 属性 from.categories__wrapper 移动到 .categories__content 并将 top on.categories__wrapper 设置为 0

.categories__wrapper {
    display: none;
    position: absolute;
    top: 0;
    left: -100px;
}

.categories__content {
    position: relative;
    top: 30px;
    box-shadow: 0px 0px 4px #BDBDBD;
    border-radius: 5px;
    background: #FFFFFF;
}

最后将类别包装在带有 class="nav__item" 的导航项中，如下所示：

  <nav class="nav">
    <div class="nav__item">
      <span class="categories__link">Categories</span>
      <div class="categories__wrapper">
        ...
      </div>
    </div>
  </nav>

 .header__nav { display: flex; justify-content: center; align-items: center; height: 100vh; }.nav { position: relative; }.nav__item { position: relative; }.nav__item:hover >.categories__wrapper { display: block; }.categories__link { color: #000000; cursor: pointer; }.categories__link:hover { color: #2F80ED; }.categories__wrapper { display: none; position: absolute; top: 0; left: -100px; }.categories__content { position: relative; top: 30px; box-shadow: 0px 0px 4px #BDBDBD; border-radius: 5px; background: #FFFFFF; }.categories__content::after { z-index: -10; content: ""; position: absolute; width: 0; height: 0; top: -5px; left: 50%; border: 5px solid transparent; transform-origin: 0 0; transform: rotate(45deg); box-shadow: 0px 0px 4px #BDBDBD; }.categories__content::before { z-index: 10; content: ""; position: absolute; width: 0; height: 0; top: -5px; left: 50%; border: 5px solid #fff; transform-origin: 0 0; transform: rotate(45deg); }.categories__list { display: flex; padding: 14px 30px; }.list__link { line-height: 150%; color: #000000; }.list__link:hover { color: #2F80ED; }

 <div class="header__nav"> <nav class="nav"> <div class="nav__item"> <span class="categories__link">Categories</span> <div class="categories__wrapper"> <div class="categories__content"> <div class="categories__list"> <ul class="left__list"> <li><a class="list__link" href="" #>Sport</a></li> <li><a class="list__link" href="" #>World</a></li> <li><a class="list__link" href="" #>Covid</a></li> <li><a class="list__link" href="" #>Business</a></li> </ul> <ul class="right__list"> <li><a class="list__link" href="" #>Politics</a></li> <li><a class="list__link" href="" #>Sciense</a></li> <li><a class="list__link" href="" #>Religion</a></li> <li><a class="list__link" href="" #>Health</a></li> </ul> </div> </div> </div> </div> </nav> <div class="header__burger"> <span></span> </div> </div>