Bootstrap навигационная панель не переключается при нажатии - PullRequest
Новая
       11

Bootstrap навигационная панель не переключается при нажатии

0 голосов
/ 20 января 2020

Я использую 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>

1 Ответ

0 голосов
/ 21 января 2020

У вас неправильный синтаксис на 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>
...