如何创建自定义选择香草ajs ?

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

然后将顶部属性从。categores__wrapper移动到。categores__content，并将。categores__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>