Question

我正在处理 MVCOnlineShop 项目。我正在尝试制作一个下拉列表，将类别作为dropdown按钮，将产品作为drop down content，我让这些类别有效，但没有drop down content。我认为这是关于HTML标签。

我做了partial view CategoryLayout.cshtml：

@model IEnumerable<MVCOnlineShop.Models.Category>
@{
    ViewBag.Title = "CategoryLayout";
}

@foreach (var Category in Model)
{
   <li>
       <div class="dropdown">
           <button class="dropbtn">@Html.ActionLink(Category.CategoryName,
"ProductList", new { Category = Category.CategoryID })</button>
       </div>
   </li>

   <div class="dropdown-content">
       @foreach (var Product in Category.Products)
       {
           <li>@Html.ActionLink(Product.ProductName,
"Details", new { id = Product.CategoryID })</li>
       }
    </div>
}

这就是我在_Layout.cshtml写的：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
        @Html.Partial("CategoryLayout")
    </ul>
</div>
</div>

你能帮助我吗，我被困住了。我错过了什么吗？

提前致谢：）

Answer 1

现在编辑您的代码实际上是可读的，我可以看到您在视图中没有像在https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover中提到的方法那样生成相同的布局。

那里显示的基本结构是：

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

将此与您的代码进行比较，我认为您的结束</li>需要在 div的结尾之后具有“dropdown-content”类和“dropdown-content” “div需要在”下拉“div中。 “下拉内容”不应包含其他<li>。 <li>应该只是<ul>或<ol>的孩子，除了其他任何东西，加上我确定它打破了描述下拉效果的CSS。最后，您的布局页面最后有一个孤儿</div>。

这应该更像是：

CategoryLayout.cshtml：

@model IEnumerable<MVCOnlineShop.Models.Category> @{ ViewBag.Title = "CategoryLayout"; } @foreach (var Category in Model) { <li> <div class="dropdown"> <button class="dropbtn">@Html.ActionLink(Category.CategoryName, "ProductList", new { Category = Category.CategoryID })</button> <div class="dropdown-content"> @foreach (var Product in Category.Products) { @Html.ActionLink(Product.ProductName, "Details", new { id = Product.CategoryID }) } </div> </div> </li> }

_Layout.cshtml：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> @Html.Partial("CategoryLayout") </ul> </div>

如果你不确定为什么我改变了我的内容，我建议你更仔细地研究一下如何使用HTML标记。作为调试工具，您还可以使用浏览器的“查看源”功能来比较代码的最终输出结果与操作方法中的内容。有时在那里使用Razor语法，以及循环等，可能很难将最终结果可视化。此外，你不稳定的格式和缩进也使它不清楚。

DropDown内容不起作用（MVC）

1 个答案: