如果您在移动设备上查看 twoguysplayingzelda.com，您会注意到显示了我的子菜单。这使得菜单太长了。我想隐藏这些并使它们成为下拉列表(带有“+”符号表示有一个下拉列表)。所以你会点击游戏，然后点击你想要的游戏，然后看到每个游戏的选项。我就是想不通这个。我的 CSS 在下面。感谢您的帮助!
@media (max-width: 1000px) {
/* navigation */
.main-menu { display: none; }
.search-toggle { width: 24px; }
.nav-toggle {
display: block;
padding: 25px 0;
}
.nav-toggle .bar {
display: block;
width: 26px;
height: 3px;
margin-top: 5px;
background: #8E8E8E;
border-radius: 1px;
}
.nav-toggle .bar:first-child { margin-top: 0; }
.nav-toggle:hover { cursor: pointer; }
.nav-toggle.active .bar { background: #fff; }
.mobile-menu li { border-top: 1px solid rgba(255,255,255, 0.1); }
.mobile-menu > li:first-child { border-top: none; }
.mobile-menu a {
display: block;
padding: 25px 5%;
font-size: 0.9em;
text-transform: uppercase;
color: #999;
letter-spacing: 1px;
}
.mobile-menu a:hover { color: #fff; }
.mobile-menu ul a { padding-left: 10%; }
.mobile-menu ul ul a { padding-left: 15%; }
.mobile-menu ul ul ul a { padding-left: 20%; }
.mobile-menu ul ul ul ul a { padding-left: 25%; }
.mobile-menu ul ul ul ul ul a { padding-left: 30%; }
}
最佳答案
您可以尝试 jQuery 移动可折叠菜单:http://demos.jquerymobile.com/1.4.0/collapsible/
我还在此处找到了一个可能适合您的基于 css 的解决方案:Pure CSS collapse/expand div .
否则，如果您想使用 jquery 移动路线，请确保 <head>在你的 html 中标记文件看起来像这样:
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
script 中的这些 url和 link将允许您自动提取 jQuery 移动代码，而无需下载任何文件/代码并将它们显式添加到您的元素中。然后，在你的 body 内标记，添加一个 div 环绕整个页面，如下所示:
<div data-role = "page">
...
</div>
然后，您可以在 data-role = "page" 内向您的页面添加可折叠列表div ，像这样:
<div data-role="collapsible">
<h4>Heading</h4>
<ul data-role="listview">
<li><a href="#">List item 1</a></li>
<li><a href="#">List item 2</a></li>
<li><a href="#">List item 3</a></li>
</ul>
</div>
您可以查看有关 jQuery Mobile 的精彩教程: https://www.tutorialspoint.com/jquery_mobile/jquery_mobile_setup.htm http://demos.jquerymobile.com/1.4.0/collapsible/#&ui-state=dialog
关于CSS Responsive 如何使子菜单成为下拉菜单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46455999/