如何使用 css 或 javascript 在触摸屏设备上制作多级下拉菜单？

Question

How do I make a multi-level dropdown menu work on a touchscreen device using css or javascript?如何使用 css 或 javascript 在触摸屏设备上制作多级下拉菜单？ Because when I tested out my website on a touchscreen device I clicked on the dropdown menu (which worked fine), but when I tried to get rid of the dropdown menu I couldn't (unless I reloaded the page).因为当我在触摸屏设备上测试我的网站时，我点击了下拉菜单（效果很好），但是当我试图摆脱下拉菜单时我不能（除非我重新加载页面）。 I would like it to have it hover on desktop and not hover on touchscreens.我希望它悬停在桌面上而不是悬停在触摸屏上。 Is that even possible?这甚至可能吗？ Here's my html and css text:这是我的 html 和 css 文本：

    <!DOCTYPE HTML> 
<html lang="en"> 
<head> 
   <meta name="viewport" content="width=device-width, initial-scale=1" /> 
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/ 
   normalize.min.css"> 
   <style> 
     @media (max-width: 640px) { 
       .main-navigation{ 
         position: absolute; 
         top: 166px; 
         left: 173px; 
       } 
       ul { 
         list-style: none; 
         padding: 0; 
         margin: 0; 
         background: #6e151e; 
         border-radius: 5px; 
       } 
       ul li { 
         display: block; 
         position: relative; 
         float: left; 
         background: #6e151e; 
         border-radius: 5px; 
         width: 130px; 
       } 
       li ul { 
         display: none; 
         position: absolute; 
         top: 37px; 
         left: 0px; } 
       ul li a { 
         display: block; 
         padding: 1em; 
         text-decoration: none; 
         white-space: nowrap; 
         color: #fff; 
         font-family: Helvetica; 
         font-size: 11px; 
         padding-top: 12px; 
         padding-bottom: 12px; 
         font-weight: 70000px; 
         border-radius: 5px; 
         text-align: center; 
         border-right: none; 
       } 
       ul li a:hover { 
         background: #054075; 
         transition: .4s ease; 
       } 
       li:hover > ul { 
         display: block; 
         position: absolute;          
         transition: .4s ease; 
       } 
       li:hover li { 
         float: none; 
         transition: .4s ease; } 
       li:hover a { 
         background: #6e151e; 
         transition: .4s ease; 
       } 
       li:hover li a:hover { 
         background: #054075; 
         transition: .4s ease; 
       } 
       @media (max-width: 640px) { 
       ul ul ul { 
         border-left: 1px solid #fff; 
         left: 130px; 
         top: 0px; 
       } 
     }
     </style>
</head> 
<body> 
   <ul class="main-navigation"> 
     <li class="Menu"><a href="#">Menu</a> 
   <ul> 
     <li><a href="#">Section 1</a> 
   <ul> 
     <li><a href="#">Subsection 1</a></li> 
     <li><a href="#">Subsection 2</a></li> 
     <li><a href="#">Subsection 3</a></li> 
     <li><a href="#">Subsection 4</a></li> 
   </ul> 
   </li> 
     <li><a href="#">Section 1</a> 
   <ul> 
     <li><a href="#">Subsection 1</a>
   </li> 
     <li><a href="#">Subsection 2</a></li> 
     <li><a href="#">Subsection 3</a></li> 
     <li><a href="#">Subsection 4</a></li> 
   </ul> 
   </li> 
     <li><a href="#">Section 3</a> 
   <ul> 
     <li><a href="#">Subsection 1</a>
   </li> 
     <li><a href="#">Subsection 2</a></li> 
     <li><a href="#">Subsection 3</a></li> 
     <li><a href="#">Subsection 4</a>
   </li> 
   </ul> 
   </li> 
   </ul> 
   </li> 
 </body> 
</html>

Answer 1

like this?像这样？ ... bootstrap... ...引导...

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="index.html">Villa borghese</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">a</a></li> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">b<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">bo</a></li> <li><a href="#">ba</a></li> <li><a href="#">bb</a></li> <li><a href="#">bc</a></li> <li><a href="#">bd</a></li> <li><a href="#">be</a></li> <li><a href="#">bf</a></li> </ul> </li> <li><a href="#">c</a></li> <li><a href="#">d</a></li> <li><a href="#">e</a></li> </ul> </ul> </div> </nav>

如何使用 css 或 javascript 在触摸屏设备上制作多级下拉菜单？

问题描述

1 个解决方案

解决方案1
1 2020-11-07 23:25:27

如何使用 css 或 javascript 在触摸屏设备上制作多级下拉菜单？

问题描述

1 个解决方案

解决方案1 1 2020-11-07 23:25:27

解决方案1
1 2020-11-07 23:25:27