javascript - 带有 javascript 的多个下拉菜单。不幸的是只有丑陋的 "brute force"意味着

Question

我设法使用 flexbox 和一些非常基本的 JavaScript 为自己构建了三个下拉菜单。
因为我不太了解，所以我使用了一个简单的函数三次，而不是使用参数、变量和其他东西。我将其称为丑陋的“蛮力”解决方案。

<div class="menue">
<div onmouseover="open1()" onmouseout="close1()" id="menuepunkt_top">
<img src="#" alt="photography"></div>
<div onmouseover="open2()" onmouseout="close2()" id="menuepunkt_top">
<img src="#" alt="painting"></div>
<div onmouseover="open3()" onmouseout="close3()" id="menuepunkt_top">
<img src="#" alt="shoutout"></div>
</div>

您看到 onmouseover="open1-3" 函数出现了三次。太丑了。
如果你看一下 JavaScript，它会变得更加丑陋。 function open1-3() {...} 和function close 1-3() {...}。

function open1() {
document.getElementById('menuepunkt_unten_1').style.opacity = '1';
}
function close1() {
document.getElementById('menuepunkt_unten_1').style.opacity = '0';
}
...

更不用说具有相同内容的 3 个巨大的 css id。

#menuepunkt_unten_1-3 {...}

很好用，你可以在这里查看:
http://codepen.io/einserpasch/pen/XJqxXY

但是谁能告诉我如何让它更优雅？

如果可能的话，我希望能够使用这个 JavaScript 函数处理所有三个下拉菜单。

Answer 1

基本解决方案包括两个不同的 CSS 类，一个用于顶部菜单，另一个用于子菜单，您可以迭代顶部菜单的 CSS 类并附加一个 onclick 事件处理程序

在这里您可以找到分步教程:http://code.stephenmorley.org/javascript/touch-friendly-drop-down-menus/