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

【问题标题】：Add more levels to expand/collapse jQuery menu添加更多级别以展开/折叠 jQuery 菜单
【发布时间】：2014-12-20 02:20:57
【问题描述】：

我想在我的网站上使用this expand/collapse jQuery menu，但我需要嵌套更多级别。仅将 a 嵌套到我要扩展的子菜单项中，这似乎不起作用。有没有人幸运地做到了这一点？

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

HTML

<div id='cssmenu'>
<ul>
   <li><a href='http://google.com'><span>Home</span></a></li>
   <li><a href='http://google.com'><span>Products</span></a>
      <ul>
         <li><a href='http://google.com'>Widgets</a></li>
         <li class="has-sub active"><a href='http://google.com'><span>Menus</span></a>
            <ul>
               <li><a href='http://google.com'>Widgets</a></li>
               <li><a href='#'>Menus</a></li>
               <li><a href='#'>Products</a></li>
            </ul>
         </li>
         <li><a href='#'>Products</a></li>
      </ul>
   </li>
   <li><a href='#'><span>Company</span></a>
      <ul>
         <li><a href='#'>About</a></li>
         <li><a href='#'>Location</a></li>
      </ul>
   </li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

jQuery

$(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;  
    }       
  });

});

【问题讨论】：

发布到目前为止您尝试的代码。

标签： jquery menu collapse expand

【解决方案1】：

这是Fiddle

如果它有sub-sub-menu类，则再添加一个 if 条件并额外检查所有其他条件

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

【讨论】：

【解决方案2】：

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

HTML：

    <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>

CSS：

.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;
}

如您所见，“管理员”是一个顶级菜单选项 - 将鼠标悬停在其上后，您将获得“用户”和“群组”，将鼠标悬停在其中一个上后，您将获得子选项。我正在使用“页面”类，因此我可以使用 JavaScript 来获取点击事件 - 我将 URL 隐藏在“data-url”属性中，以便我可以将它们重定向到下一页，但你可以使用您喜欢的任何方法。

【讨论】：