Question

你知道为什么我看不到任何子项目＆＃34;设置＆＃34;链接？当我点击“设置”时，它只是无效另一个问题是，如何在设置旁边放置小图标？喜欢＆＃34; wheel＆＃34;？

<div class="navbar navbar-inverse navbar-fixed-top">
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    @Html.ActionLink("Log Off", "LogOff", "Login")
                </li>
            </ul>
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    @Html.ActionLink("AdeccoDoc", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
                </div>
                <div class="navbar-collapse collapse navbar-left">
                    <ul class="nav navbar-nav" style="font-weight: bold;">
                        <li class="dropdown">
                        <li>@Html.ActionLink("AdeccoView", "Index", "AdeccoViews")</li>
                        <li>@Html.ActionLink("Pipeline", "Index", "Pipelines")</li>
                        <li>@Html.ActionLink("Clients", "Index", "Clients")</li>
                        <li>@Html.ActionLink("Planned Meetings", "Index", "Comments")</li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li>@Html.ActionLink("Event Type", "Index", "EventTypes")</li>
                                <li>@Html.ActionLink("Field of Cooperation", "Index", "FCOes")</li>
                                <li>@Html.ActionLink("Employees", "Index", "Employees")</li>
                                <li>@Html.ActionLink("Event Type", "Index", "PTDatas")</li>
                                <li>@Html.ActionLink("Event Type", "Index", "PTDatas")</li>
                            </ul>
                        </li>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

Answer 1

DEMO轻松：

每件事看起来都不错，可能是你没有把bootstrap css引用和jquery引用。

＆＃13;

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
 <div class="navbar navbar-inverse navbar-fixed-top">
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                </li>
            </ul>
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                  
                </div>
                <div class="navbar-collapse collapse navbar-left">
                    <ul class="nav navbar-nav" style="font-weight: bold;">
                        <li class="dropdown">
                       
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span>Settings<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                             <li><a>g</a></li>
                                <li><a>g</a></li>
                                <li><a>g</a></li>
                            </ul>
                        </li>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
</div>

＆＃13;

Answer 2

对于子菜单，您可以通过查看现有的Q＆amp; A来获得答案 StackeOverflow Post

Answer 3

以下代码适用于多级菜单

CSS：

<style>
    .dropdown-submenu
    {
        position: relative;
    }

    .dropdown-submenu .dropdown-menu
    {
        top: 0;
        left: 100%;
        margin-top: -1px;
    }
</style>

脚本：

    <script>
    $(document).ready(function () {
        $('.dropdown-submenu a.submenu').on("click", function (e) {
            $(this).next('ul').toggle();
            e.stopPropagation();
            e.preventDefault();
        });
    });
</script>

HTML：

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
                </span>
            </button>
            @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        </div>
        <div class="navbar-collapse collapse navbar-left">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span
                    class="glyphicon glyphicon-cog"></span>Settings<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a>q</a></li>
                        <li><a>qwq</a></li>
                        <li><a>eeq</a></li>
                        <li class="dropdown-submenu"><a href="#" class="submenu" data-toggle="dropdown"><span
                            class="glyphicon glyphicon-cog"></span>Sub Settings<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a>g</a></li>
                                <li><a>qq</a></li>
                                <li><a>wqw</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="navbar-collapse collapse navbar-right">
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</div>

asp.net mvc5子菜单中的默认菜单

3 个答案: