asp.net中的默認菜單mvc5子菜單

Question

你知道爲什麼我不能在「設置」鏈接上看到任何子項嗎？ 當我點擊設置，它只是無效 而另一個問題，我怎麼能把小圖標放在設置旁邊？像「輪子」？

<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，易於：

每一件事情似乎不錯，可能是你還沒有把引導CSS refrences和jQuery參考。

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

Answer 2

對於子菜單，你可以通過查看現有的Q &得到回答 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>