Bootstrap 导航栏切换器仅在第一次单击时起作用

Posted 2023-05-08

【中文标题】Bootstrap 导航栏切换器仅在第一次单击时起作用

【英文标题】：Bootstrap navbar toggler working only on first click

【发布时间】：2020-08-04 08:20:58

【问题描述】：

我的导航栏折叠了，但折叠时出现的汉堡包按钮不可点击。我正在使用 Bootstrap 4.3.1 和 Rails 6。我将 jQuery 从 3.5.0 降级到 3.4.1。按照建议here 做yarn remove jquery & yarn add jquery@3.4.1 然后yarn install --check-files。我还删除了 app/node_modules 中的 jquery 文件夹，并使用前面提到的代码重新安装了它，但它没有改变任何东西。我只想提一下，即使在重新安装 jQuery 之后，该文件夹也没有添加到 node_modules 中。我不知道这是否重要，但是我的 jQuery 动画仍然有效。

这是我的部分_app_nav：

<%= render :layout => "layouts/base" do %>
  <nav class="navbar navbar-expand-lg">
    <a href="<%= posts_path %>" class="navbar-brand"><%= image_tag image_path('logos/edukado_white.png'), width: 140, class: 'mr-2'%></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item <%= 'active' if current_page?(posts_path) %>">
          <a class="nav-link" href="<%= posts_path %>">Accueil</a>
        </li>
        <li class="nav-item <%= 'active' if current_page?(new_post_path) %>">
          <a class="nav-link" href="<%= new_post_path %>">Publier</a>
        </li>
        <li class="nav-item <%= 'active' if current_page?(new_user_invitation_path) %>">
          <a class="nav-link" href="<%= new_user_invitation_path %>">Inviter</a>
        </li>
        <% if user_signed_in? %>
          <li class="nav-item <%= 'active' if current_page?(posts_user_path(current_user)) %>">
            <a class="nav-link" href="<%= posts_user_path(current_user) %>">Mes publications</a>
          </li>
        <% end %>
      </ul>
      <%= render partial: 'layouts/navbar' %>
    </div>
  </nav>
  <%= yield %>
<% end %>

我的 application.js 文件：

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.


// ***** START: ADDED BY KisoThemes *****
window.$ = window.jQuery = require("jquery")
// ***** END: ADDED BY KisoThemes *****

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
// ***** START: ADDED BY KisoThemes *****
require("bootstrap")
require("metismenu/dist/metisMenu")
require("jquery-slimscroll")
require('bootstrap-switch')
require('chartjs')
require('jquery-countdown')
require('jquery-countto')
require('cd-easypiechart')
require('fastclick')
require('object-fit-images')
require('flot/source/jquery.canvaswrapper');
require('flot/source/jquery.flot');
require('gmaps.core')
require('jasny-bootstrap')
require('jvectormap')
require('jquery-parallax.js')
require('code-prettify')
require('prismjs')
require('sparklines')
// ***** END: ADDED BY KisoThemes *****




// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

require("trix")
require("@rails/actiontext")
require("kiso_themes")

提前感谢您的帮助！

【问题讨论】：

我会尝试禁用 turbolinks 看看是否能解决问题，您可以通过在 application.js 中注释掉 require turbolinks 来做到这一点。如果这确实解决了问题，那么您就知道它与 turbolinks 而不是您的引导代码有关。你能测试并报告结果吗

好的，所以我在 application.js 中评论了这一行 // require("turbolinks").start() 并重新启动了我的服务器。问题依旧……

好吧，至少我们已经排除了，所以下一个问题，当您切换侧边栏时，您是否在浏览器控制台中收到任何错误？

你检查过 chrome 开发者工具中的源代码面板吗？您可以查看该页面中包含哪些 javascript 文件。

当我切换导航栏@Brad 时，我在浏览器控制台中没有收到任何错误。 @SeoungHoJeoung 我不确定这是否是您要查找的内容，但它在 packs/js 中调用了一个名为 application.xml 的文件。我在其中搜索了 jQuery，这是我找到它的第一行：/* WEBPACK VAR INJECTION */.call(this, __webpack_require__(/*! jquery */ "./node_modules/jquery/dist/jquery.js"))).

【参考方案1】：

使用 bootstrap 5 和 Rails 6，我通过在按钮类中更改它来修复它

data-toggle="collapse" data-target="#navbarSupportedContent"

到这里

data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"