ネストされたドロップダウンメニューcss jquery

Question

私は本当にcssとHTMLに新しいが、jqueryについてはほとんど知らない。 デバイスに表示されるメニューを作成しようとしています。したがって、メニューはクリック可能でなければなりません。メニューはいわゆるハンバーガーアイコンの下に入れ子にされ、より深いネストされたリストを持つ必要があります。私はトップレベルのドロップダウンを達成するためにネット忍者のチュートリアルを使いました。しかし、より深いネストされたリストは動作しません、誰かが私に手を貸してくれる？

私のHTMLは次のようになります。

<nav id="MainNavigation"> 
    <a href="#" id="menuIcon"><img src="images/menu_logo_webb_design.svg" alt="Menu icon"></a> 
    <ul id="dropDownMenu"> 
     <li> 
     <a href="#" title="Woman">Woman 
     </a> 
     <li> 
     <a class="Sub_Menu_Link" href="#" title="Womanplus">+ 
     </a> 

     <ul> 
      <li><a href="#">1</a> </li> 
      <li><a href="#">2</a> </li> 
      <li><a href="#">3</a> </li> 
      <li><a href="#">4</a> </li> 
      <li><a href="#">5</a> </li> 
     </ul> 
     </li> 
     </li> 
     <li> <a href="#" title="Man">Man</a> 
     <li> 
     <a class="Sub_Menu_Link" href="#" title="Manplus">+ 
     </a> 
     <ul> 
      <li><a href="#">1</a> </li> 
      <li><a href="#">2</a> </li> 
      <li><a href="#">3</a> </li> 
      <li><a href="#">4</a> </li> 
      <li><a href="#">5</a> </li> 
     </ul> 
     </li> 
     </li> 
     <li><a class="Sub_Menu_Link" href="#" title="Sale">Sale</a></li> 
    </ul> 
    </nav> 

そして、私のCSS：

nav>a{ 
    display:block; 
    background-color:red; 
    padding: 0 20px; 
} 

nav ul.open{ 
    display:block; 
} 

nav ul ul.open{ 
    display:block; 
} 



nav ul li a{ 
    color:#161212; 

    margin:0; 
} 


nav ul ul li a{ 
    color:#161212; 

    margin:0; 
} 

nav ul{ 
    display: none; 
} 
nav ul ul{ 
    position:absolute; 
    display:none; 
} 

nav >ul a{ 
    padding:0px 0px 0px 30px; 

} 


nav ul ul a{ 
    padding:0 30px 0 0; 
} 
nav>ul{ 
    margin:0; 
    padding:0 0px;; 
    float:left; 
    line-height:40px; 
} 


nav ul a{ 
    list-style:none; 
    text-decoration:none; 
} 
nav ul ul li a { 
    display:inline-block; 

} 

nav>ul:after{ 
    content:""; 
    visibility:hidden; 
    display:block; 
    clear:both; 
} 
.Sub_Menu_Link{ 
    display:inline-block; 

    line-height:40px; 
} 

.Sub_Menu_Link:hover{ 
    color:yellow; 
} 

nav ul{ 
    background:#E9E9E9; 
    position:relative; 
    width:100%; 
} 
nav ul ul li a:hover{ 
    color:yellow; 
} 

とjQuery：

// JavaScript Document 
$(document).ready(function(){ 


    $("nav a").on("click", function(){ 

     $("nav > ul").toggleClass("open"); 
    }); 


    $(" .Sub_Menu_Link").on("click", function(){ 
      $("nav ul>ul").toggleClass("open"); 
      });  



}); 

Answer 1

ただ、最初の関数にこれらの変更を行い、それが必要大丈夫です。

$("nav a").click(function(event){ 
    event.stopPropagation(); 
    event.preventDefault(); 
    $(this).next("ul").toggleClass("open"); 
}); 

そして多分これはあまりにもあなたを助けることができる：

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=h