嵌套下拉菜單css jquery

我真的很新的CSS和HTML，並不知道jquery幾乎沒有。嘗試創建一個將顯示在設備上的菜單。菜單因此必須是可點擊的。該菜單將嵌套在一個所謂的漢堡包圖標下，它需要有一個更深的嵌套列表。我已經使用了一個淨忍者教程來實現頂級下拉菜單。但是更深的嵌套列表將無法工作，有誰能幫我一把嗎？嵌套下拉菜單css 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"); 
      });  



});

來源

2017-02-23 Patrik

只需進行這些更改第一個功能，它應該一切都好。

$("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

來源

2017-02-23 08:50:14

非常感謝你的幫助！但現在，當我使用此代碼時，點擊後的菜單始終保持打開狀態，並且不會隱藏。這可能是什麼問題？我應該如何解決這個問題？ – Patrik

這是「錨點」（）的默認行爲，所以我包含了event.preventDefault（）和event.stopPropagation來停止它重新加載頁面。請不要忘記標記爲已完成的問題。 –

嵌套下拉菜單css jquery

回答

相關問題