Horizo ntal Toggle Dropdown

Question

我正在尝试创建水平下拉菜单（错误。.dropside？）。

单击时，它会向右扩展以显示更多选项，用户可以单击所需的选项。

我已经找到了此JsFiddle，但它是使用ul和li而不是select和option实现的。这对于单击菜单项并调度动作真的重要吗？鼠标悬停时也会展开，而不是单击时会展开。当单击菜单项时，我需要菜单保持打开状态，直到单击左侧的“ X”为止。如果有人可以帮助我开始这一点，将不胜感激。

Here's an image of what I'm trying to do

Answer 1

如果您出于某种原因必须在标记中使用select和option，请执行以下操作，但这是一项繁重的工作https://www.w3schools.com/howto/howto_custom_select.asp

或者您可以执行以下操作：

var btnToggle = document.querySelector(".js-toggle");

btnToggle.addEventListener("click", handleMenu);

function handleMenu() {
  var menu = document.querySelector(".js-menu");
  if ( menu.classList.contains("is-showing") )
  {
    menu.classList.remove("is-showing");
  }
  else
  {
    menu.classList.add("is-showing");
  }
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #333;
}


.navigation {
  background: #fff;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  padding: 20px;
}

.menu {
  list-style: none;
  padding-left: 22px;
  margin: auto;
  display: none;
}
.menu.is-showing {
  display: inline-flex;
}
.menu__item {
  background: #fff;
}

.box {
  display: block;
  background: #999;
  width: 60px;
  height: 60px;
  margin: 0 22px;
}
.box:hover {
  background: #498cdf;
}

.toggle {
  padding: 0;
  background: #e7e7e7;
  border: none;
  width: 60px;
  height: 60px;
}

<div class="navigation">
  
  <button class="toggle js-toggle">x</button>
  <ul class="menu js-menu">
    <li class="menu__item">
      <span class="box"></span>
    </li>
    <li class="menu__item">
      <span class="box"></span>
    </li>
    <li class="menu__item">
      <span class="box"></span>
    </li>
    <li class="menu__item">
      <span class="box"></span>
    </li>
    <li class="menu__item">
      <span class="box"></span>
    </li>
    <li class="menu__item">
      <span class="box"></span>
    </li>
    <li class="menu__item">
      <span class="box"></span>
    </li>
    <li class="menu__item">
      <span class="box"></span>
    </li>
  </ul>
  
</div>

Answer 2

尝试这样的事情：

[...document.getElementsByClassName("item")].forEach(i => i.addEventListener("click", function(e) {
  e.stopPropagation();
  console.log(this);
}));

document.getElementById("open-button").addEventListener("click", function() {
  this.parentElement.classList.add("open");
});

document.getElementById("close-button").addEventListener("click", function() {
  this.parentElement.classList.remove("open");
});

body {
  background: black;
}
.menu {
  background: white;
  border-radius: 17px;
  height: 34px;
  width: 100px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.menu .item {
  display: none;
  color: grey;
}
.menu #open-button {
  display: block;
}
.menu #close-button {
  display: none;
  color: grey;
}

.menu.open {
  justify-content: space-around;
  width: 300px;
}
.menu.open .item {
  display: block;
}
.menu.open .item:hover {
  color: black;
}
.menu.open #close-button {
  display: block;
}
.menu.open #close-button:hover {
  color: black;
}
.menu.open #open-button {
  display: none;
}

<div class="menu">
  <div id="open-button">Menu</div>
  <div id="close-button">&#10005;</div>
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
<div>

Answer 3

尝试一下

<nav>
  <a class="nav-btn">Logo</a>
  <ul>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
  </ul>
</nav>

 a, li {
        display: block;
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
        border: 1px solid yellow;
        padding: 0;
        margin: 0;
    }

    ul {
        margin: 0;
        padding: 0;
        display: none;
    }

    .expand{
          display: block;
    }

$("nav .nav-btn").click(function(){
	
  $("nav ul").toggleClass("expand");
});

a, li {
    display: block;
    width: 100px;
    height: 100px;
    background-color: red;
    float: left;
    border: 1px solid yellow;
    padding: 0;
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
    display: none;
}

.expand{
      display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <a class="nav-btn">Logo</a>
  <ul>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
  </ul>
</nav>