递归函数

Question

问题：

我正在研究nopCommerce主题，并且我正在整合Bootstrap。因为nopCommerce允许无限数量的父类别，所以我需要主题能够处理用户可能添加的子下拉菜单项。

现在发生的事情是，当点击第一级下拉项目时，任何其他带子项的子类别也会被删除＆＃34; <＃34>。

我的助手功能如下：

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

我已经查看了Bootstrap多级下拉菜单的其他示例 - 但是从我所看到的情况来看，我的帮助函数构建的标记应该正常工作。这是我将鼠标悬停在父类别上时的样子图片：＆＃34; Computers＆＃34; （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;
}