从移动设备和桌面使用html、css和js的下拉菜单

Question

我引用了这个线程：JS使用li上的onclick事件来显示块

从桌面上可以，但我如何做同样的事情，但从手机上你可以触摸"；消失"；菜单，并确保它在下一次触摸之前保持可见？

我目前在这里使用这个代码：

function dropdown() {
document.getElementById("Menuitems").style.display = "block";
}

#dropdown ul {
display: block;
transition-duration: 1s;
}
#dropdown ul li {
display: block;
background-color: #212121;
color: #ffffff;
}
#dropdown ul li ul {
display: none;
}
#dropdown ul li:hover>ul {
/*this is what the onclick event should do*/
display: block;
}

<div id="dropdown">
<ul>
<li onclick="dropdown()"><a>Menu</a>
<ul id="Menuitems">
<li><a href="">item 1</a> </li>
<li><a href="">item 2</a> </li>
<li><a href="">item 3</a> </li>
</ul>
</li>
</ul>
</div>

Answer 1

我刚刚添加了一个活动类onclick。。活动类在每次单击时进行切换。只需为活动类添加相同的悬停效果

function dropdown() {
document.getElementById("Menuitems").classList.toggle("active");
}

#dropdown ul {
display: block;
transition-duration: 1s;
}
#dropdown ul li {
display: block;
background-color: #212121;
color: #ffffff;
}
#dropdown ul li ul {
display: none;
}
#dropdown ul li:hover>ul,
#dropdown ul li>ul.active{
/*this is what the onclick event should do*/
display: block;
}

<div id="dropdown">
<ul>
<li onclick="dropdown()"><a>Menu</a>
<ul id="Menuitems">
<li><a href="">item 1</a> </li>
<li><a href="">item 2</a> </li>
<li><a href="">item 3</a> </li>
</ul>
</li>
</ul>
</div>