Javascript 引导3导航折叠不工作

我已经参考了很多文章，但我不明白为什么我的折叠函数（以及我插入的任何其他js）不起作用。我在标题中包含了.js和jquery链接。我还扫描了我的代码。我会把我的导航代码，如果需要，提供一个链接到整个代码笔

HTML

你打错了

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar collapse">

您的数据目标应该与列表的DIV ID匹配（

）

这应该可以做到：

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapse">

您有一个输入错误

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar collapse">

您的数据目标应该与列表的DIV ID匹配（

）

这应该可以做到：

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapse">

您有一个输入错误

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar collapse">

您的数据目标应该与列表的DIV ID匹配（

）

这应该可以做到：

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapse">

您有一个输入错误

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar collapse">

您的数据目标应该与列表的DIV ID匹配（

）

这应该可以做到：

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapse">

您有两个问题

您需要删除折叠的父标记（不应该在那里）

然后，您需要更改

数据目标

属性（您的

）以引用可折叠的

HTML

 <nav role="navigation" class="navbar navbar-fixed-top" id="nav">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapse">
            <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="#header">Sume</a>
        </div>
        <div class="collapse navbar-collapse" id="nav-collapse">
          <ul class="nav navbar-nav navbar-right">
           <li class="active"><a href="#intro">About</a></li>
           <li><a href="#exp">Experience</a></li>
           <li><a href="#skl">Technical Skills</a></li>
           <li><a href="#img-port">Image Portfolio</a></li>
           <li><a href="#contact">Contact</a></li>             
         </ul>
       </div>
     </div>
    </nav>

切换导航

您有两个问题

您需要删除折叠的父标记（不应该在那里）

然后，您需要更改

数据目标

属性（您的

）以引用可折叠的

HTML

 <nav role="navigation" class="navbar navbar-fixed-top" id="nav">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapse">
            <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="#header">Sume</a>
        </div>
        <div class="collapse navbar-collapse" id="nav-collapse">
          <ul class="nav navbar-nav navbar-right">
           <li class="active"><a href="#intro">About</a></li>
           <li><a href="#exp">Experience</a></li>
           <li><a href="#skl">Technical Skills</a></li>
           <li><a href="#img-port">Image Portfolio</a></li>
           <li><a href="#contact">Contact</a></li>             
         </ul>
       </div>
     </div>
    </nav>

切换导航

您有两个问题

您需要删除折叠的父标记（不应该在那里）

然后，您需要更改

数据目标

属性（您的

）以引用可折叠的

HTML

 <nav role="navigation" class="navbar navbar-fixed-top" id="nav">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapse">
            <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="#header">Sume</a>
        </div>
        <div class="collapse navbar-collapse" id="nav-collapse">
          <ul class="nav navbar-nav navbar-right">
           <li class="active"><a href="#intro">About</a></li>
           <li><a href="#exp">Experience</a></li>
           <li><a href="#skl">Technical Skills</a></li>
           <li><a href="#img-port">Image Portfolio</a></li>
           <li><a href="#contact">Contact</a></li>             
         </ul>
       </div>
     </div>
    </nav>

切换导航

您有两个问题

您需要删除折叠的父标记（不应该在那里）

然后，您需要更改

数据目标

属性（您的

）以引用可折叠的

HTML

 <nav role="navigation" class="navbar navbar-fixed-top" id="nav">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapse">
            <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="#header">Sume</a>
        </div>
        <div class="collapse navbar-collapse" id="nav-collapse">
          <ul class="nav navbar-nav navbar-right">
           <li class="active"><a href="#intro">About</a></li>
           <li><a href="#exp">Experience</a></li>
           <li><a href="#skl">Technical Skills</a></li>
           <li><a href="#img-port">Image Portfolio</a></li>
           <li><a href="#contact">Contact</a></li>             
         </ul>
       </div>
     </div>
    </nav>

切换导航

你想折叠什么？你想折叠什么？你想折叠什么？你想折叠什么？很抱歉，第二行代码看起来和我的完全一样。你的数据目标应该是

#nav collapse

，而不是。仔细阅读我的答案。第二行代码的ID应该与数据目标匹配，但它不匹配。您有一个无效的数据目标。谢谢，它起作用了。我觉得我以前试过，但什么也没得到。谢谢你！抱歉，第二行代码与我的代码完全相同。您的数据目标应该是

#nav collapse

，而不是。仔细阅读我的答案。第二行代码的ID应该与数据目标匹配，但它不匹配。您有一个无效的数据目标。谢谢，它起作用了。我觉得我以前试过，但什么也没得到。谢谢你！抱歉，第二行代码与我的代码完全相同。您的数据目标应该是

#nav collapse

，而不是。仔细阅读我的答案。第二行代码的ID应该与数据目标匹配，但它不匹配。您有一个无效的数据目标。谢谢，它起作用了。我觉得我以前试过，但什么也没得到。谢谢你！抱歉，第二行代码与我的代码完全相同。您的数据目标应该是

#nav collapse

，而不是。仔细阅读我的答案。第二行代码的ID应该与数据目标匹配，但它不匹配。您有一个无效的数据目标。谢谢，它起作用了。我觉得我以前试过，但什么也没得到。谢谢你！