单击时引导导航栏不切换答案

【问题标题】：Bootstrap navbar not toggling when clicked单击时引导导航栏不切换
【发布时间】：2020-01-20 17:50:16
【问题描述】：

我正在使用 Bootstrap 4 在我的导航栏中切换小屏幕 (sm) 下拉菜单的折叠。但是切换不起作用，当我点击切换按钮时没有任何反应。

我确保以正确的顺序导入所有资产/链接。有谁能看出来是怎么回事？

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <environment include="Development">

        <link href="~/lib/bootstrap/css/bootstrap.css" rel="stylesheet" />
        <script src="~/lib/jquery/jquery.js"></script>
        <script src="~/lib/bootstrap/js/bootstrap.js"></script>

    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
              integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    </environment>
    <link href="~/css/site.css" rel="stylesheet" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <div class="container">
        <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
            <a class="navbar-brand" asp-action="index" asp-action="home">
                <img src="~/images/leon.jpg" height="30" width="30" />
            </a>
            <button type="button" class="navbar-toggler" data-toggle="collapse" datatarget="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapsibleNavbar">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a asp-action="index" asp-action="home" class="nav-link">List</a>
                    </li>
                    <li class="nav-item">
                        <a asp-action="create" asp-action="home" class="nav-link">Create</a>
                    </li>
                </ul>
            </div>
        </nav>

        <div>
            @RenderBody()
        </div>
    </div>
    @if (IsSectionDefined("Scripts"))
    {

        @RenderSection("Script", required: false)
    }

</body>
</html>

【问题讨论】：

标签： asp.net-core bootstrap-4

【解决方案1】：

datatarget 的语法有误，应该是 data-target。

改变这个：

datatarget="#collapsibleNavbar"

对此：

data-target="#collapsibleNavbar"

例子：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>

【讨论】：