Asp.net - bootstrap navbar下拉菜单无法正常工作

本文介绍了Asp.net - bootstrap navbar下拉菜单无法正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 到目前为止一直在玩这个并且取得了相当多的成功但是我个人似乎无法解决一个问题。 我正在使用bootstrap创建我的导航栏，其中的所有内容在大多数情况下都能正常工作，直到我到达使用下拉菜单的位置。 我希望看起来像这个。 到目前为止我得到的最佳结果虽然看起来像这个。 我尝试过： @model MessePrototyp .Models.MenuItem < li class =dropdown-submenu> < a href =＃class =dropdown-item dropdown-toggledata-toggle =dropdown> @ Model.Caption< / a> < ul class =dropdown-menu> @foreach（@ Model.MenuItems中的var subitem） { if（subitem.MenuItems.Count！= 0） { @await Html.PartialAsync（MenuItem，@ subitem） } else {< li>< aa class =dropdown-itemasp- area =asp-controller =@ subitem.Controllerasp-route-id =@ subitem.Notationasp-action =@ subitem.Action> @ subitem.Caption< / a>< / li> ; } } < / ul> < / li> 这是产生我最佳结果的代码。问题，或者至少产生重复子点的代码似乎是粗体线。然而，我无法找到一种解决方法，因为我尝试的任何东西都给了我更远离我想要的结果。解决方案 您可以尝试这样的事情： < div class = btn-group > < 按钮 类型 = 按钮 class = btn > K. onfiguration < / button > < 按钮 type = button class = btn dropdown-toggle data-toggle = 下拉列表 aria-haspopup = true aria-expanded = false > < span class = 插入符号 > < / span > < span class = sr-only > 切换下拉< / span > < / button > < ul class = 下拉菜单 > @foreach（@ Model.MenuItems中的var subitem） { if（subitem.MenuItems.Count！= 0） { @await Html.PartialAsync（MenuItem，@ subitem） } 其他 { < li > < a asp-area = asp-controller = @ subitem.Controller asp-route-id = @ subitem.Notation asp-action = @ subitem.Action > @ subitem.Caption < / a > < / li > } } < / ul > < / div > Been toying around with this for a bit and have had quite a bit of success so far but there's just one problem I personally can't seem to fix.I'm using bootstrap to create my navbar and everything in it which works fine for the most part, until I come to the point where I am using dropdowns.What I want it to look like is something like this.The most optimal result I have gotten so far though looks like this.What I have tried:@model MessePrototyp.Models.MenuItem<li class="dropdown-submenu"> <a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown">@Model.Caption</a> <ul class="dropdown-menu"> @foreach (var subitem in @Model.MenuItems) { if (subitem.MenuItems.Count != 0) { @await Html.PartialAsync("MenuItem", @subitem) } else { <li><a a class="dropdown-item" asp-area="" asp-controller="@subitem.Controller" asp-route-id="@subitem.Notation" asp-action="@subitem.Action">@subitem.Caption</a></li> } } </ul></li>This is the code that producess my "optimal" result. The problem, or at least the bit of code that generates the duplicate subpoint seems to be the bolded line. I have however not been able to find a way to work around it as anything I have tried has given me results that are even further away from what I am looking for. 解决方案 You can try something like this:<div class="btn-group"> <button type="button" class="btn">Konfiguration</button> <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> @foreach (var subitem in @Model.MenuItems) { if (subitem.MenuItems.Count != 0) { @await Html.PartialAsync("MenuItem", @subitem) } else { <li><a asp-area="" asp-controller="@subitem.Controller" asp-route-id="@subitem.Notation" asp-action="@subitem.Action">@subitem.Caption</a></li> } } </ul></div> 这篇关于Asp.net - bootstrap navbar下拉菜单无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！