多层次引导下拉

Question

问题：

我工作的一个nopCommerce主题，我结合引导。由于nopCommerce允许不定数量的父类别，我需要该主题才能够处理用户添加的尽可能多的子下拉菜单项。

现在发生的情况是，当第一层下拉菜单被点击时，任何其他带子菜单的子菜单也被“下拉”。

我的助手功能如下：

@helper RenderMenuLine(CategorySimpleModel category, int level) 
{ 

    bool isDrop = (category.SubCategories.Count > 0); 
    string toggleName = "dropdown" + level.ToString(); 
    if (isDrop) 
    { 
     <li class="dropdown"> 
      <a href="@Url.RouteUrl("Category", new { SeName = category.SeName })" class="dropdown-toggle" data-target="@toggleName" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> 
       @category.Name 
       <span class="caret"></span> 
       @if (category.NumberOfProducts.HasValue) 
       {  
        <text></text> @T("Categories.TotalProducts", category.NumberOfProducts.Value) 
       } 
      </a> 

      @{ var subCats = category.SubCategories.Where(x => x.IncludeInTopMenu); } 
      <ul class="dropdown-menu" id="@toggleName"> 
       @foreach (var subCat in subCats) 
       { 
        @RenderMenuLine(subCat, level++) 
       } 
      </ul> 

     </li> 
    } 
    else 
    { 
     <li><a href="@Url.RouteUrl("Category", new { SeName = category.SeName })">@category.Name</a></li> 
    } 
} 

和我的基本菜单标记如下：

<div class="navbar navbar-default"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="@Url.RouteUrl("HomePage")"><i class="fa fa-home"></i></a> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
      @{ 
       var categories = Model.Categories.Where(x => x.IncludeInTopMenu).ToList(); 

      } 
      @foreach (var item in categories) 
      { 
       @RenderMenuLine(item, 0) 
      } 
     </ul> 

    </div> 
</div> 

我已经看了引导多层次的下拉菜单中的其他样本 - 但是从我所看到的，我的帮助函数构建的标记应该工作。这里是什么样子，当我将鼠标悬停在父类像一个画面：“计算机”（POS是软件的一个子类）：

注意我知道更多的造型可能是必要的。现在我只关心功能。此外，水平整数和togglename字符串的存在，因为我想也许我需要一种方法来将下拉菜单与菜单本身绑定。

Answer 1

我仍然非常喜欢特定的自举解决方案，但有一点编辑和CSS，我没有得到我想要的结果：

我能够通过调整帮助我做到这一点函数只是一点点，并添加一些CSS样式来完成剩下的工作。

我添加了一个名为“dropdown-submenu”的CSS类，并且该类将用于“下拉式下拉列表”，并调整了我的帮助函数以跟踪我们在函数中使用level int的位置签名：

@helper RenderMenuLine(CategorySimpleModel category, int level) 
{ 

bool isDrop = (category.SubCategories.Count > 0); 
string dropDownClass;   // The class we assign to the dropdown markup depends on where we are 
if (level > 0)     // If we are already in a dropdown menu 
{ 
    dropDownClass = "dropdown-submenu"; 
} 
else // otherwise we are in the root menu, or level = 0 
{ 
    dropDownClass = "dropdown"; 
} 
if (isDrop) 
{ 
    <li class="@dropDownClass"> 
     <a tabindex="-1" href="@Url.RouteUrl("Category", new { SeName = category.SeName })" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> 
      @category.Name 
      @if (level == 0) 
      { <span class="caret"></span> } 
      @if (category.NumberOfProducts.HasValue) 
      { 
       <text></text> @T("Categories.TotalProducts", category.NumberOfProducts.Value) 
      } 
     </a> 

     @{ var subCats = category.SubCategories.Where(x => x.IncludeInTopMenu); } 
     <ul class="dropdown-menu"> 
      @foreach (var subCat in subCats) 
      { 
       @RenderMenuLine(subCat, level++) 
      } 
     </ul> 

    </li> 
} 
else 
{ 
    <li><a href="@Url.RouteUrl("Category", new { SeName = category.SeName })">@category.Name</a></li> 
} 
} 

而且我对这个新的下拉CSS是：

li.dropdown:hover > ul.dropdown-menu { 
    display: block; 
} 

.dropdown-submenu { 

    position:relative; 
} 
.dropdown-submenu>.dropdown-menu { 

    top:0; 
    left:100%; 
    margin-top:-6px; 
    margin-left:-1px; 
    -webkit-border-radius:0 6px 6px 6px; 
    -moz-border-radius:0 6px 6px 6px; 
    border-radius:0 6px 6px 6px; 
    display: none; 
} 
li.dropdown-submenu:hover > ul.dropdown-menu { 
    display: block; 
} 

.dropdown-submenu>a:after { 
    display: block; 
    content:" "; 
    float:right; 
    width:0; 
    height:0; 
    border-color:transparent; 
    border-style:solid; 
    border-width:5px 0 5px 5px; 
    border-left-color:#cccccc; 
    margin-top:5px; 
    margin-right:-10px; 
}