如何将正常的下拉菜单更改为多级下拉菜单

时间:2018-07-16 14:45:30

标签: html css asp.net-mvc twitter-bootstrap-3 drop-down-menu

我正在使用Bootstrap从事ASP MVC项目。

我试图通过将一项分为两个项目来将Bootstrap DropDown菜单更改为Multi-Level DropDown。

想法是将一组语言项目“ Switzerland(FR)”和“ Switzerland(DE)”收集在一组瑞士中,其中有两个项目:FR或DE。

从此link复制CSS引导程序下拉菜单后,我尝试验证区域性,他们这样调用dropdown-submenu:

 Layout = null;

    var cultures = new string[] { "de", "uk", "fr", "nl", "es", "ch", "fr-ch", "at" };

    var currentCulture = Context.Request.RequestContext.RouteData.Values["culture"].ToString();
    var currentLanguage = handler.ResolveLanguage(currentCulture);
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />

    @Styles.Render("~/Content/ProgramsStyles")
    @Styles.Render("~/Content/font-awesome")
    @if (ViewContext.HttpContext.Request.Url.Host == "localhost")
    {
        <link href="/Content/Programs.less?v=20180706.1" rel="stylesheet" />
    }
    else
    {
        <link href="/Content/Programs.css?v=20180706.1" rel="stylesheet" />


     }

        @Scripts.Render("~/Content/ProgramsScripts")

</head>
<body data-qa-page="@ViewBag.DataQaAttribute">
    <div class="container">
        <div class="row programs-header">
            <div class="col-md-12">
                <a href="@Url.Action("LatestPrograms", "Categories")">
                    <img src="~/Content/Images/affilinet_logo.png" class="pull-left" alt="affilinet" width="251" height="73" />
                </a>


 <h1 class="hidden-sm hidden-xs">

     @Resource.Get("resProgramsDirectory", "/modules/Programs", currentLanguage)</h1>

                <div class="dropdown dropdown-menu-right pull-right">
                    <button id="platformSwitch" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style="width:150px;text-align:left">
                        @getPlatformText(currentCulture, currentLanguage) <span class="caret"></span>
                    </button>
                    <ul class="dropdown-submenu" aria-labelledby="platformSwitch">
                        @foreach (string culture in cultures)
                        {
                            if (culture != currentCulture) 
                            {
                                <li>
                                    <a href="@Url.Action("LatestPrograms", "Categories", new { culture = culture })">@getPlatformText(culture, handler.ResolveLanguage(culture))</a>
                                </li>
                            }
                        }
                    </ul>
                </div>
            </div>
        </div>
        @RenderBody()
    </div>

0 个答案:

没有答案