导航栏不会崩溃，但工作正常

Posted 2023-03-17

【中文标题】导航栏不会崩溃，但工作正常

【英文标题】：Navbar doesnt collapse but works fine

【发布时间】：2021-05-16 21:58:54

【问题描述】：

点击后最小导航栏可以正常打开，链接滚动也可以正常工作，但由于某种原因它不会折叠。对不起，我是这里的js菜鸟

使用的 JS 是 bootstrap-3。

代码：

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js" />
<div class="container">
   <nav class="main-menu">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><i class="fa fa-bars" aria-hidden="true"></i></button>
      </div>

      <div id="navbar" class="navbar-collapse collapse">
         <ul class="nav navbar-nav">
            <li><a class="active" href="index.html">Home</a></li>
            <li><a data-scroll href="#about">About us</a></li>
            <li><a data-scroll href="#service">Services</a></li>
            <li><a data-scroll href="#GetInvolved">Get Involved</a></li>
<li><a data-scroll href="#testimonials">Testimonials</a></li>
            <li><a data-scroll href="#getintouch">Contact</a></li>
<li><a style="color:#F8DC40;background-color: black"  data-scroll href="#service">Request Service</a></li>
<li><a style="color:red;background-color: #F8DC40" data-toggle="modal" data-target="#opendonatemodal" data-scroll href="#">Donate Now</a></li>
</ul>
      </div>
   </nav>
</div>

【问题讨论】：

嗨，也许你检查一下引导迁移，这会很有帮助 getbootstrap.com/docs/4.0/migration ，你的项目非常遗留，很难创建你的问题。但是您可以从 GitHub Bootstrap 中查看您的问题：github.com/twbs/bootstrap/issues。

控制台有错误吗？

Bootstrap 3.0.3v 需要 jquery (>= 1.9.0)

@DeC 你能检查一下这个域 covidhome.help 的移动纵横比吗？可能会让你明白我的担心。对不起这里的菜鸟

collapse in 负责打开导航栏。但是当关闭引导程序时会删除 in 类。你可以在 [bootstrap_css_3.0.3][1] 中看到。在其上方搜索 .collapse.in 和 collapse。 [1]：netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.css

【参考方案1】：

在您的代码引导类中，in 在单击按钮时不会被删除。尝试搜索您的代码有什么问题。如果您尝试使用以下命令从控制台切换in 类。只需在控制台中多次运行以下命令即可。

document.querySelector('#navbar').classList.toggle('in')

您可以看到它开始相应地打开和关闭。

collapse in 和 collapse 来自 Bootstrap 3.0.3

.collapse 
    display: none;

.collapse.in 
    display: block;

in 类负责显示或隐藏 HTML 元素。