如何使用 vanillaJS 创建自定义选择？答案

【问题标题】：How to create custom select with vanillaJS?如何使用 vanillaJS 创建自定义选择？
【发布时间】：2021-11-15 19:34:02
【问题描述】：

我必须用 VanillaJS 做一个像 this 这样的导航栏。

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

这是想要的结果：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

【问题讨论】：

请用英文写
请用英文写你的问题More Info
那是什么语言？它的角色看起来很漂亮:)
当您说：“样式和项目已设置”时，您的意思是您不能更改 css 和 html？使用 javascript 是您唯一的选择吗？

标签： javascript html css

【解决方案1】：

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

先丢掉javascript。将以下内容添加到 css：

.nav__item {
    position: relative;
}

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

然后将 top 属性从 .categories__wrapper 移动到 .categories__content 并将 .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>

【讨论】：