嵌套下拉菜单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

回答

相关问题