如何創建下拉列表以保存子菜單項
[英]How to create drop-list to hold the sub-menu items
問題描述
該頁面包含一個側面菜單欄，菜單欄包含5-6個內容。
並且內容包含子內容
如何將子內容包裝到主要內容中並使子內容不可見，直到有人單擊主要內容。
有可能這樣做嗎？ 我有很多子內容，但出於演示目的，我僅在一個主要內容下顯示了5-6個mqain內容和3-4個子內容。
function openNav() { document.getElementById("mySidenav").style.width = "250px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; }
<style> body { font-family: "Lato", sans-serif; } .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } .sidenav a:hover { color: #f1f1f1; } .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } </style>
<body> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <div class="user" style="background-image:url(ava.jpg)"></div> <ul class="nano-content"> <li class="sub-menu"> <a href="javascript:void(0);"><i class="fa fa-cogs"></i><span>Popular Links</span><i class="arrow fa fa-angle-right pull-right"></i></a> <ul> <li><a href="ui-alerts-notifications.html">Java Database Connectivity Code</a> </li> <li><a href="ui-panels.html">Java Mail Api</a> </li> <li><a href="ui-buttons.html">java Itext</a> </ul> </li> </ul> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span> </body>
可能嗎？
1 個解決方案
解決方案1
3 已采納 2017-09-03 13:23:45
function openNav() { document.getElementById("mySidenav").style.width = "250px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; } var hasSubMenu = document.querySelectorAll('.hasSubMenu'); hasSubMenu.forEach(function(i,q){ i.addEventListener('click',function(){ this.classList.toggle('clicked'); }) })
body { font-family: "Lato", sans-serif; } .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } .sidenav a:hover { color: #f1f1f1; } .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } .hasSubMenu + ul{ display: none; } .clicked + ul{ display: inline-block; }
<div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <div class="user" style="background-image:url(ava.jpg)"></div> <ul class="nano-content"> <li class="sub-menu"> <a href="javascript:void(0);" class="hasSubMenu" ><i class="fa fa-cogs"></i><span>Popular Links</span><i class="arrow fa fa-angle-right pull-right"></i></a> <ul> <li><a href="ui-alerts-notifications.html">Java Database Connectivity Code</a></li> <li><a href="ui-panels.html">Java Mail Api</a></li> <li><a href="ui-buttons.html">java Itext</a></li> </ul> </li> </ul> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span>
這只是示例代碼 。
您應該嘗試學習如何編寫更好的代碼。
Bootstrap中帶有回旋的下拉菜單的子菜單項未顯示
[英]sub-menu items of Drop-down menu with carousal in bootstrap is not showing
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.