Javascript 水平切换下拉列表

我正在尝试创建一个水平下拉列表（呃..dropside？）

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

我发现了这一点，但它是使用

ul

和

li

实现的，而不是

select

和

选项

。这对单击菜单项和分派操作真的很重要吗？它也会在悬停时展开，而不是单击时展开。当单击菜单项时，我需要菜单保持打开状态，直到单击左侧的“X”。如果有人能帮我开始这项工作，我将不胜感激

---

试试这样的方法：

[…document.getElementsByClassName（“item”）].forEach（i=>i.addEventListener（“单击”），函数（e）{
e、 停止传播（）；
console.log（this）；
}));
document.getElementById（“打开按钮”）.addEventListener（“单击”，函数）（）{
this.parentElement.classList.add（“打开”）；
});
document.getElementById（“关闭按钮”）.addEventListener（“单击”，函数）（）{
this.parentElement.classList.remove（“打开”）；
});
正文{
背景：黑色；
}
.菜单{
背景：白色；
边界半径：17px；
高度：34px；
宽度：100px；
显示器：flex；
弯曲方向：行；
证明内容：中心；
对齐项目：居中；
光标：指针；
}
.菜单.项目{
显示：无；
颜色：灰色；
}
.菜单#打开按钮{
显示：块；
}
.菜单#关闭按钮{
显示：无；
颜色：灰色；
}
.菜单.打开{
证明内容：周围的空间；
宽度：300px；
}
.菜单.打开.项目{
显示：块；
}
.菜单.打开.项目：悬停{
颜色：黑色；
}
.菜单.打开#关闭按钮{
显示：块；
}
.菜单.打开#关闭按钮：悬停{
颜色：黑色；
}
.menu.open#打开按钮{
显示：无；
}

菜单
✕
项目1
项目2
项目3
如果出于某种原因必须在标记中使用select和option，下面介绍了如何操作，但这需要做大量工作

或者你可以这样做：


var btnToggle=document.querySelector（“.js toggle”）；
btnToggle.addEventListener（“单击”，handleMenu）；
函数handleMenu（）{
var menu=document.querySelector（“.js menu”）；
if（menu.classList.contains（“正在显示”））
{
menu.classList.remove（“正在显示”）；
}
其他的
{
menu.classList.add（“正在显示”）；
}
}
*{
框大小：边框框；
}
身体{
保证金：0；
背景：#333；
}
.导航{
背景：#fff；
边界半径：9999px；
显示：内联flex；
对齐项目：居中；
填充：20px；
}
.菜单{
列表样式：无；
左侧填充：22px；
保证金：自动；
显示：无；
}
.menu.is-showing{
显示：内联flex；
}
.菜单项{
背景：#fff；
}
.盒子{
显示：块；
背景：#999；
宽度：60px；
高度：60px；
边际：0.22px；
}
.box:悬停{
背景#498cdf；
}
.切换{
填充：0；
背景：#e7e7e7；
边界：无；
宽度：60px；
高度：60px；
}

x


















试试这个

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


$（“nav.nav btn”）。单击（函数（）{
美元（“nav ul”）。切换类别（“扩展”）；
});
a，li{
显示：块；
宽度：100px；
高度：100px；
背景色：红色；
浮动：左；
边框：1px纯黄色；
填充：0；
保证金：0；
}
保险商实验室{
保证金：0；
填充：0；
显示：无；
}
.扩大{
显示：块；
}







请在此处输入您的代码以帮助您。选择和选项通常是表单项，而不是菜单选择器。但有时select用作“页面选择器”，样式很难看。创建菜单的正确方法是使用ul列表和li项目。感谢您花时间回答。我想知道`菜单'中的这个
应该反映什么？它返回为未定义的me@N.A
这个
应该是指点击的html元素。在
openMenu
函数中，
e
未定义，您是否收到错误消息？您使用的是framwork还是JS？@N.A无论如何，如果不起作用，您可以使用
addEventListener
绑定这些函数。检查更新的答案，希望对您有所帮助。谢谢您的更新。这是有道理的，但它仍然不起作用。。。如果你有时间看的话，我贴了一个问题和我的完整代码。谢谢@答：这个问题需要一个水平切换，正如你们所看到的，我的答案提供了它，它可以工作。不起作用的是您对该代码的进一步修改。你是对的，这是一个单独问题的主题。看起来您正在使用react，因此它完全改变了上下文。您应该使用不同的技术来实现这一点。
 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;
    }