jquery Bootstrap 崩溃不起作用;汉堡菜单未显示

piah890a 于 2023-02-18 发布在 jQuery

关注(0)|答案(7)|浏览(136)

我正在做一个有Angular 的应用程序，用Bower安装了我所有的库。当我检查控制台时，所有的表/脚本都正确加载。我还在我的脑海中定义了bootstrap和jQuery。我从Bootstrap的网站复制了代码。
我遇到的问题是汉堡菜单从来没有出现过。链接只是保持完全相同的屏幕是大的。另一个问题是，没有在导航折叠折叠div显示，即使当网站是大的。似乎有一个问题与折叠，这是使两者都不工作。建议？

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jay - Web Developer</title>

    <!-- For Angular Routing -->
    <base href='/'>

    <!-- CSS -->
    <link rel="stylesheet" href="assets/libs/bootstrap/dist/css/bootstrap.min.css">

    <!-- JS -->
    <script src="assets/libs/angular/angular.min.js"></script>
    <script src="assets/libs/angular-route/angular-route.min.js"></script>
    <script src="assets/libs/angular-animate/angular-animate.min.js"></script>
    <script src="assets/libs/jquery/dist/jquery.min.js"></script>
    <script src="assets/libs/bootstrap/dist/js/bootstrap.js"></script>

    <!-- APP -->
    <script src="app/controllers/mainCtrl.js"></script>
    <script src="app/app.routes.js"></script>
    <script src="app/app.js"></script>
</head>

<body ng-app="jayPortfolio" ng-controller="mainController as main">

  <!-- NAVBAR -->
  <header>
    <div class="navbar navbar-default">
      <div class="navbar-inner">
          <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
              <span class="icon-bar">About</span>
              <span class="icon-bar">Portfolio</span>
              <span class="icon-bar">Experience</span>
              <span class="icon-bar">Contact</span>
            </a>

            <a class="brand" href="#">JAY</a>

            <div class="nav-collapse collapse">
              work please
            </div>

          </div>
       </div>
    </div>
  </header>
</body>

</html>

jquery

来源：https://stackoverflow.com/questions/32081497/bootstrap-collapse-isnt-working-hamburger-menu-not-showing-up

7条答案

按热度按时间

vc6uscn91#

导航栏的标记不正确。标记应如下所示：

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Huisje Thuisje</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#contact">Contact</a></li>
                <!-- Put here your menu items -->
            </ul>

        </div --><!--/.navbar-collapse -->
    </div>
</nav>

在ul元素中，放置菜单项。这应该可以完成任务。另请参见文档页面。

赞(0）回复(0）举报 2023-02-18

vs91vp4v2#

在我的情况下，我新创建的laravel项目汉堡菜单不起作用，所以转到https://getbootstrap.com/docs/4.4/getting-started/introduction/和coppy的3 js链接，并添加到您的头部。

赞(0）回复(0）举报 2023-02-18

rks48beu3#

从bootstrap站点复制Javascript链接并将其粘贴到HTML文件中。它将正常工作！

赞(0）回复(0）举报 2023-02-18

jaxagkaj4#

container部分的语法更像是这样：

<div class="container">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>

        <a class="brand" href="#">JAY</a>

        <div class="nav-collapse collapse">
          <ul class="nav navbar-nav">
             <li><a href="#">About</a></li>
             <li><a href="#">Portfolio</a></li>
             <li><a href="#">Experience</a></li>
             <li><a href="#">Contact</a></li>
          </ul>
        </div>

</div>

赞(0）回复(0）举报 2023-02-18

oo7oh9g95#

所以对我来说，我有同样的问题，问题是我使用的CDN是：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

这是必要的 AJAX 工作，这是在页脚部分，所以我离开这里的ajax工作，并有以下脚本cdns在头部部分和引导崩溃工作正常：

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

赞(0）回复(0）举报 2023-02-18

mkh04yzy6#

这个网站，这是关于汉堡包菜单图标帮助了我。网址是https://mdbootstrap.com/docs/b4/jquery/navigation/hamburger-menu/。它显示了你一个完整的编码，这可能会有所帮助。你可能要改变汉堡包菜单图标的颜色，使其对黑色可见。我键入

<nav class="navbar navbar-light light-blue lighten-4">.

对于span标记，我输入了

<span class="navbar-toggler-icon navbar-dark"></span>

因为当你键入navbar-dark时，汉堡菜单图标显示为浅色，反之亦然。

赞(0）回复(0）举报 2023-02-18

c2e8gylq7#

适用于Boostrap 5用户。
1.JS链接不包含

<body>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
</body>

<div class='collapse navbar-collapse'>中未列出的导航栏列表元素
3.如果div的id与aria-control值不匹配，则尽管有JS链接，nav-items也不会显示在下拉列表中。

赞(0）回复(0）举报 2023-02-18

我来回答

jquery Bootstrap 崩溃不起作用;汉堡菜单未显示

7条答案

相关问题

热门标签

最新问答