サブメニュー項目を保持するドロップリストを作成する方法

-1

ページにはサイドメニューバーがあり、メニューバーには5-6の内容が含まれています。
内容にサブコンテンツが含まれています
サブコンテンツをメインコンテンツにラップし、メインコンテンツをクリックするまでサブコンテンツを非表示にする方法を教えてください。
これは可能ですか？私は多くのサブコンテンツを持っていますが、私はデモのために1つのメインコンテンツの下に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

サブメニュー項目を保持するドロップリストを作成する方法

答えて

関連する問題