引导程序中的切换按钮不想“取消切换”答案

【问题标题】：Toggle button in boostrap doesn't want to "untoggle"引导程序中的切换按钮不想“取消切换”
【发布时间】：2019-12-31 13:50:22
【问题描述】：

所以我正在使用 Laravela 和 Vue.js 创建一个简单的网站，并且网站是响应式的，我添加了引导程序 4。一切正常，导航栏在它应该折叠的时候折叠，并且切换按钮显示，当我点击它时，它显示一切。但是当我点击切换按钮来隐藏导航栏时，它只是闪烁并且不执行任何操作。

<!--Navigation bar-->
       <nav class="navbar navbar-expand-sm navbar-light bg-light">
           <a class="navbar-brand" href="#">website<span id = "EditorColorist">editor colorist</span></a>
           <button class="navbar-toggler" data-toggle="collapse" data-target = "#collapsibleNavId">
                <span class = "navbar-toggler-icon"></span>
           </button>
           <div class="collapse navbar-collapse" id="collapsibleNavId">
               <ul class="navbar-nav ml-auto">
                   <li class="nav-item">
                       <a class="nav-link" href="/">HOME</a>
                   </li>
                   <li class="nav-item">
                       <a class="nav-link" href="/about">ABOUT</a>
                   </li>
                    <li class="nav-item">
                       <a class="nav-link" href="/contact">CONTACT</a>
                   </li>
               </ul>
           </div>
       </nav>
 <!--Navigation bar-->

是的，我在 CSS 之前添加了 JS、Jquery。

【问题讨论】：

你能创建一个最小的工作示例吗
已经在里面了。
不，我的意思是一个工作示例，我们可以在 sn-p 或 codepen 中看到输出
哦，我的错，给我一分钟。
嗯，我不太确定可能是这个原因

标签： javascript html css twitter-bootstrap bootstrap-4

【解决方案1】：

我为此创建了一个简单的 sn-p 进行测试，那里的切换器对我来说工作得很好。随意尝试。

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body>
  <!--Navigation bar-->
  <nav class="navbar navbar-expand-sm navbar-light bg-light">
    <a class="navbar-brand" href="#">website<span id = "EditorColorist"> editor colorist</span></a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#collapsibleNavId">
       <span class = "navbar-toggler-icon"></span>
     </button>
    <div class="collapse navbar-collapse" id="collapsibleNavId">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="/">HOME</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/about">ABOUT</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/contact">CONTACT</a>
        </li>
      </ul>
    </div>
  </nav>
  <!--Navigation bar-->
  <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>
</body>

</html>

您可以尝试检查您的 css 以确保您没有任何与引导程序使用的类发生冲突的类。我已经看到这种情况发生并导致导航栏工作方式出现问题。

【讨论】：