下拉菜单 Umbraco

Question

我为 umbraco 制作了一个菜单，但我无法让下拉菜单正常工作！以下是我的代码：

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

                    <div class="NavDigiCampuz">
                        <div>
                            <div class="nav nav-list tree">
                                @{                                  
                                    var documentRootNodeId = Model.Content.GetPropertyValue("documentRoot", true); // Fetch recursive document root id.
                                    var selection = Umbraco.TypedContent(documentRootNodeId).Children.Where("Visible"); // Select all nodes below the document root.
                                }

                                @foreach(var item in Model.Content.Ancestor(1).Descendants("menu")){
                                    foreach (var Menus in @item.Descendants("menuItem")){
                                        <li class="MenuItems">@Menus.Name</li>  
                                            foreach (var MenuItems in @Menus.Children){
                                                if(MenuItems.GetPropertyValue("hoofdstukIcoon") != "") {
                                                <li><a class="NormalA" href="@MenuItems.Url"><i class="fa fa-@(MenuItems.GetPropertyValue("hoofdstukIcoon")) fa-fw"></i> @MenuItems.Name</a></li>
                                                    }else {
                                                            <li><a class="NormalA"href="@MenuItems.Url">@MenuItems.Name</a></li>



                                                var childIsActive = false;

                                                    foreach(var sub in @MenuItems.Children){
                                                    if (CurrentPage.Url == sub.Url) {
                                                        childIsActive = true;
                                                    }



                                            <ul class="nav subnav nav-list tree @(childIsActive ? "" : "collapse")">
                                                @foreach(var sub2 in @MenuItems.Children){
                                                    <li @(CurrentPage.Url == sub.Url ? "class=active" : "")>
                                                        <a onclick="parent.resizeParent();" href="@sub.Url">@(sub.GetPropertyValue("hoofdstukMenuTitel") != "" ? sub.GetPropertyValue("hoofdstukMenuTitel") : sub.GetPropertyValue("hoofdstukTitel"))</a>
                                                    </li>
                                                }
                                            </ul>
                                            }
                                        }
                                    }
                                }
                                }
                            </ul>
                            </div>
                        </div>
                    </div>

下拉代码应该从 <ul class="nav subnav nav-list tree @(childIsActive ? "" : "collapse")"> 开始，但这似乎不起作用。

下面是我希望我的页面的快速结构：

帮助项目 3 应该有一个现在没有的下拉菜单。我错过了什么？

Answer 1

您的结构存在一些不一致之处： 这一行：

<div class="nav nav-list tree">

应该是这样的：

<ul class="nav nav-list tree">

我会删除包裹它的<div>。

我只是猜测您使用的是引导程序之类的东西，您使用的是框架还是自定义 css？

您的子菜单也应该嵌套在<li> 元素中：

else
 {
     <li><a class="NormalA" href="@MenuItems.Url">@MenuItems.Name</a>
         var childIsActive = false;
         foreach (var sub in @MenuItems.Children)
         {
            if (CurrentPage.Url == sub.Url)
            {
             childIsActive = true;
            }

           <ul class="nav subnav nav-list tree @(childIsActive ? "" : "collapse")">
               @foreach (var sub2 in @MenuItems.Children)
               {
                 <li @(CurrentPage.Url == sub.Url ? "class=active" : "")>
                    <a onclick="parent.resizeParent();" href="@sub.Url">@(sub.GetPropertyValue("hoofdstukMenuTitel") != "" ? sub.GetPropertyValue("hoofdstukMenuTitel") : sub.GetPropertyValue("hoofdstukTitel"))</a>
                 </li>
               }
           </ul>
          }
      </li>

}