html、css 中的菜單下拉菜單以及來自移動設備和桌面的 js

Question

我指的是這個線程： JS using onclick event on li to display block

從桌面上是可以的，但我如何做同樣的事情，但是從移動設備上你可以觸摸“消失”菜單並確保它在下一次觸摸之前保持可見？

我目前在這里使用此代碼：

 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

我剛剛添加了一個活動的 class onclick..活動的 class 每次點擊都會切換。 只需將相同的 hover 效果添加到活動 class

 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>