水平切换下拉菜单 [英] Horizontal Toggle Dropdown

问题描述

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

I'm trying to create a horizontal dropdown (err.. dropside?).

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

When clicked, it expands to the right to show more options, and the user can click the option they want.

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

I have found this JsFiddle but it is implemented using ul and li, not select and option. Does this really matter for the purposes of clicking a menu item and dispatching an action? It also expands on hover, not on click. And when a menu item is clicked, I need the menu to stay open until the 'X' on the left is clicked. If anyone could help me start on this it would be much appreciated.

这是我要执行的操作的图像

推荐答案

尝试如下操作：

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

这篇关于水平切换下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！