如何在 MVC 5 中实现菜单答案

【问题标题】：How to implement Menu in MVC 5如何在 MVC 5 中实现菜单
【发布时间】：2018-10-24 10:31:50
【问题描述】：

创建了一个 MVC 5 项目，您想更改此项目的菜单，因为它使用了Bootwatch，您要实现的菜单如下

我做的第一件事就是改变我项目的大体风格，下载 bootstrap.css 文件

然后我用我的 BundleConfig 替换它，因为我之前有一个，这修改了我的项目的样式，但不包括前面提到的导航栏

要放置您想要的导航栏，请在我的_Layout.cshtml 中实现以下代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Muebles Pangal</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-dark bg-success">
            <a class="navbar-brand" href="#">Muebles Pangal</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation" style="">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarColor01">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="@Url.Action("Index", "Categorias")">Categorias </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="@Url.Action("Index", "Productoes")">Productos </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="@Url.Action("Index", "Ubicacions")">Proveedores </a>
                    </li>
                </ul>
                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" placeholder="Buscar" type="text">
                    <button class="btn btn-secondary my-2 my-sm-0" type="submit">Buscar</button>
                </form>
            </div>
        </nav>
        </div>

        <div class="container body-content">
            @RenderBody()
            <hr />
            <footer>
                <p>&copy; @DateTime.Now.Year - Sistema Bodega</p>
            </footer>
        </div>

        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
</body>
</html>

但是在执行我的项目时，我发现以下问题，我的菜单不能很好地响应响应调用，这意味着当我更改（缩小）浏览器的大小并从我的 @987654332 调用菜单时@this 显示出来了，但是马上又崩溃了。

所以它不能以正确的方式工作，我已经尝试解决这个问题好几天了，但我没有得到好的结果。我已经安装了 Bootstrap 和 Bootstrap.less 软件包，有人可以帮助我吗？怎么回事？

对我有什么帮助吗？

【问题讨论】：

因此，当您单击按钮时，它会显示菜单.. 然后.. 无需再次单击按钮.. 菜单消失了吗？你能创建一个JSFiddle吗？
正是这种行为，你知道发生了什么吗？ @M12Bennett
而您所做的只是从 bootswatch 复制并粘贴代码？没有变化？

标签： html css asp.net-mvc twitter-bootstrap-3 bootstrap-4

【解决方案1】：

我相信您缺少 jQuery.min.js，或者它可能在您的代码结构中以错误的顺序放置。希望这个 sn-p 有帮助！！

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-expand-lg navbar-dark bg-success">
    <a class="navbar-brand" href="#">Muebles Pangal</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation" style="">
                <span class="navbar-toggler-icon"></span>
            </button>
    <div class="collapse navbar-collapse" id="navbarColor01">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="@Url.Action(" Index ", "Categorias ")">Categorias </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="@Url.Action(" Index ", "Productoes ")">Productos </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="@Url.Action(" Index ", "Ubicacions ")">Proveedores </a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" placeholder="Buscar" type="text">
        <button class="btn btn-secondary my-2 my-sm-0" type="submit">Buscar</button>
      </form>
    </div>
  </nav>

【讨论】：

我不认为这是因为jQuery.min.. 这只是普通jQuery.js.. 的最小版本，我相信如果没有加载导航栏将无法工作
但我所做的只是将它添加到顶部并按预期工作，如果你注意到他只有 bootstrap.js 而根本没有 jQuery - 除非它在不同的位置
我不认为 OP 向我们展示了他们所有的代码.. 通常默认情况下，对于 MVC 项目，Bundle.config 中有另一个包引用 jquery.. 像这样：@ 987654324@
在这种情况下，它可能会在 bootstrap.js 被导入之后被导入。 BS 网站明确声明将 jquery 放在 bs.js 之前。这也是我的预感，因为这解决了问题。我也可能错了:)
我已经尝试了您的答案，但仍然无法正常工作，我该如何提供有关我的问题的更多信息？ @karthik

【解决方案2】：

你能检查你的css是否有以下内容：

.navbar-collapse.collapse {
        display: none!important;
    }

我可以使用您发布的内容在新的 MVC 5 项目中获得工作菜单，但我没有与您相同的 css。

请查看类似问题：Bootstrap mobile menu wont stay open

【讨论】：