添加更多级别以展开/折叠jQuery菜单

我想在我的网站上使用，但我需要嵌套更多的级别。如果只是将a嵌套到我要展开的子菜单项中，这似乎不起作用。有谁有幸做到这一点吗

更新：我的代码到目前为止

HTML

这是一个

如果它有class

子菜单

&& (!checkElement.hasClass('sub-sub-menu'))

---

我过去也遇到过类似的问题。您应该使用CSS“弹出”菜单，而不是使用JavaScript来完成所有这些。我使用的是三级菜单，我认为这种格式更适合您（它也使页面更干净）：

HTML:

---

正如你所看到的，“Admin”是一个顶级菜单选项——一旦你将鼠标悬停在上面，你就会得到“Users”和“Groups”，一旦你将鼠标悬停在其中一个上面，你就会得到子选项。我使用“Page”类，这样我就可以使用JavaScript抓取点击事件——我将URL隐藏在“data URL”属性中，这样我就可以将它们重定向到下一个页面，但是你可以使用你喜欢的任何方法。

发布你目前尝试的代码。

$(document).ready(function(){

  $('#cssmenu > ul > li:has(ul)').addClass("has-sub");

  $('#cssmenu > ul > li > a').click(function() {
    var checkElement = $(this).next();

    $('#cssmenu li').removeClass('active');
    $(this).closest('li').addClass('active');   


    if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
      $(this).closest('li').removeClass('active');
      checkElement.slideUp('normal');
    }

    if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
      $('#cssmenu ul ul:visible').slideUp('normal');
      checkElement.slideDown('normal');
    }

    if (checkElement.is('ul')) {
      return false;
    } else {
      return true;  
    }       
  });

});

&& (!checkElement.hasClass('sub-sub-menu'))

    <ul>
        <li id="divAdminMenu" runat="server">Admin
            <ul>
                <li>Users
                    <ul>
                        <li class="Page" data-url="<%=Constants.WebPages.User.CREATE_USER %>">Create</li>
                        <li class="Page" data-url="<%=Constants.WebPages.User.EDIT_USER %>">Edit</li>
                        <li class="Page" data-url="<%=Constants.WebPages.User.ASSIGN_ROLES %>">Assign Roles</li>
                    </ul>
                </li>
                <li>Groups
                    <ul>
                        <li class="Page" data-url="<%=Constants.WebPages.Groups.CREATE_GROUP %>">Create</li>
                        <li class="Page" data-url="<%=Constants.WebPages.Groups.ASSIGN_ROLES %>">Assign Roles</li>
                    </ul>
                </li>
            </ul>
        </li>
  </ul>

.menu ul {
font-family:'Comic Sans MS';
z-index:1000;
margin:0;
padding:0;
list-style:none;
}

.menu li{
text-align:center;
color:black;
border:solid 1px black;
border-color:#330000;
background-color:#33EE00;
padding:0;
cursor:pointer;
width:125px;
}

.menu li:hover{
background-color:#FFFF00;
position:relative;
}

.menu ul li{
float:left;
position:relative;
z-index:1000;
}

.menu ul li ul{
position:absolute;
display:none;
}

.menu ul li:hover ul{
left:0;
top:23px;
display:block;
}

.menu ul li ul li{
float:none;
width:125px;
}

.menu ul li:hover ul li ul{
position:absolute;
display:none;
}

.menu ul li:hover ul li:hover ul{
display:block;
left:127px;
top:0;
}