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

嵌套下拉菜单css jquery

1 个答案: