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