Bootstrap导航栏折叠按钮不起作用

我知道这已被问及数千次，我一直在寻找一些类似的问题约一个小时。Bootstrap导航栏折叠按钮不起作用

我无法弄清楚我的代码中存在什么问题，无论我尝试使用哪种解决方案都无效。

这里是我的项目中navbar段（从引导文档导出）：

<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale = 1"> 
    <title>{{ title }}</title> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    </head> 

    <body> 

    <nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target"#rtNavbar" aria-expanded="false"> 
     <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="#">TestApp01</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse navbar-collapse" id="rtNavbar"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact Us</a></li> 
       <form class="navbar-form navbar-right"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
     </div> 
     <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true" /></button> 
     </form> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 
<!-- Some more stuff here --> 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="  crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

我使用引导3对特快的node.js应用程序。如果重要的话，我正在使用hogan模板。

来源

2016-10-01 Edward McKinzie

jQuery甚至可以使用Node.js吗？如果你只是为导航栏使用jQuery和Bootstrap的js文件，我建议看看[Bootstrap Without jQuery]（https://github.com/tagawa/bootstrap-without-jquery）。它更轻量化。 –

<head> 
 
    <meta charset="UTF-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale = 1"> 
 
    <title>{{ title }}</title> 
 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    </head> 
 

 
    <body> 
 

 
    <nav class="navbar navbar-default" role="navigation"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false"> 
 
     <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="#">TestApp01</a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse navbar-collapse" id="rtNavbar"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">About</a></li> 
 
     <li><a href="#">Contact Us</a></li> 
 
       <form class="navbar-form navbar-right"> 
 
     <div class="form-group"> 
 
      <input type="text" class="form-control" placeholder="Search"> 
 
     </div> 
 
     <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true" /></button> 
 
     </form> 
 
     </ul> 
 
    </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container-fluid --> 
 
</nav> 
 
<!-- Some more stuff here --> 
 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="  crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"

只是让这种变化的数据目标。 https://gist.github.com/anonymous/916bb0286c966660121fecbafdd9140a

来源

2016-10-01 17:29:14

它是因为Bootstrap与jQuery 3不兼容。使用jQuery 2，或者在jQuery之后嵌入jQuery Migrate。

来源

2016-10-01 17:24:22 WaldemarIce

我已经切换到jQuery 2.2.4 CDN但它仍然不工作：/ –

变化如果不因为自举3的多数民众赞成在不使用jQuery 3.0和此刻的兼容上述数据针对其错误尝试这样

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#rtNavbar" aria-expanded="false">

。所以可以与Bootstrap 3一起使用的最新版本的jQuery是2.2.4。

来源

2016-10-01 17:34:18

请看上面的答案:) –

问题的一部分可能是JS和jQuery嵌入代码的方式（以及位置）。我注意到 - 至少对于JS来说 - 没有关闭</script>标签。我认为你的问题可能很简单，因为没有把这些标签放在正确的位置，也没有正确关闭。

我在<head>中使用了以下<script>新增功能，并使折叠按钮有效，因此您可能需要在<head>内尝试这些。它甚至可以像在Bootstrap CSS链接下面不包括这两个脚本一样简单。它应该是这个样子（自举3）：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

你也在你<button>标签了与data-target一个问题。请尝试使用类似data-target""#myNavbar"的内容。

另一件事是你有一个多余的navbar-collapse第二个<div>属于您的酒吧右对齐的元素。这可能会弄脏水域并导致问题。否则，其余的代码材料看起来不错。只需尝试在<head>中声明上述代码即可。祝你好运！

来源

2018-02-19 17:16:47 Taddes

Bootstrap导航栏折叠按钮不起作用

回答

相关问题