如何創建拖放列表來容納子菜單項

-1

該頁面包含一個側面菜單欄，菜單欄包含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()">&times;</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()">&#9776;</span> 
 

 

 
</body>

這可能嗎？

來源

2017-09-03 Stone

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()">&times;</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()">&#9776;</span>

這只是樣品編號。

你應該嘗試學習如何製作更好的代碼。

來源

2017-09-03 13:23:45 zynkn

如何創建拖放列表來容納子菜單項

回答

相關問題