Bootstrap 导航菜单正常打开但无法关闭

Question

我正在 NuxtJS 中制作原始 HTML 文件的对应部分，我在 NuxtJS 项目的 Navbar 组件中有以下代码

<template>
  <section id="navigation-menu" class="menu menu3 cid-sLhoPz7Ycg" once="menu">
    <nav class="navbar navbar-dropdown navbar-fixed-top navbar-expand-lg">
      <div class="container">
        <div class="navbar-brand">
          <span class="navbar-logo">
            <a href="/">
              <img src="~/assets/images/bitflow.png" alt="Bitflow" style="height: 3rem;">
            </a>
          </span>
          <span class="navbar-caption-wrap"><a class="navbar-caption text-black text-primary display-7" href="/">Bitflow</a></span>
        </div>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarSupportedContent"
          aria-controls="navbarNavAltMarkup"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <div class="hamburger">
            <span />
            <span />
            <span />
            <span />
          </div>
        </button>
        <div id="navbarSupportedContent" class="collapse navbar-collapse">
          <ul class="navbar-nav nav-dropdown nav-right" data-app-modern-menu="true">
            <li class="nav-item">
              <a class="nav-link link text-black text-primary display-4" href="/#switch-header-1"><span class="ti-pencil-alt mbr-iconfont mbr-iconfont-btn" />Mission</a>
            </li>
            <li class="nav-item">
              <a class="nav-link link text-black text-primary display-4" href="/works"><span class="ti-layout-tab mbr-iconfont mbr-iconfont-btn" />Works</a>
            </li>
            <li class="nav-item">
              <a class="nav-link link text-black text-primary display-4" href="/#our-team"><span class="ti-headphone-alt mbr-iconfont mbr-iconfont-btn" />Team</a>
            </li>
          </ul>
          <div class="icons-menu">
            <a class="iconfont-wrapper" href="https://github.com" target="_blank" title="Save this template !">
              <span class="p-2 mbr-iconfont ti-import" />
            </a>
            <a class="iconfont-wrapper" href="#" title="Toggle dark mode">
              <span class="p-2 mbr-iconfont ti-shine" />
            </a>
          </div>
        </div>
      </div>
    </nav>
  </section>
</template>

这是 nuxt.config.js 文件中有用的块

css: [
    '@/assets/css/fontawesome.min.css',
    '@/assets/font-awesome-brands/css/brands.min.css',
    '@/assets/themify/css/themify-icons.css',
    '@/assets/tether/tether.min.css',
    '@/assets/bootstrap/css/bootstrap.min.css',
    '@/assets/bootstrap/css/bootstrap-grid.min.css',
    '@/assets/bootstrap/css/bootstrap-reboot.min.css',
    '@/assets/animatecss/animate.css',
    '@/assets/dropdown/css/style.css',
    '@/assets/formstyler/jquery.formstyler.css',
    '@/assets/formstyler/jquery.formstyler.theme.css',
    '@/assets/socicon/css/styles.css',
    '@/assets/theme/css/style.css',
    '@/assets/mobirise/css/mbr-additional.css',
    '@/assets/web/assets/mobirise-icons2/mobirise2.css'
  ],

最后是 index.vue 文件中 javascript 文件的链接

<script src="js/web/assets/jquery/jquery.min.js" />
<script src="js/popper/popper.min.js" />
<script src="js/tether/tether.min.js" />
<script src="js/bootstrap/js/bootstrap.min.js" />
<script src="js/smoothscroll/smooth-scroll.js" />
<script src="js/viewportchecker/jquery.viewportchecker.js" />
<script src="js/dropdown/js/nav-dropdown.js" />
<script src="js/dropdown/js/navbar-dropdown.js" />
<script src="js/touchswipe/jquery.touch-swipe.min.js" />
<script src="js/parallax/jarallax.min.js" />
<script src="js/formstyler/jquery.formstyler.js" />
<script src="js/formstyler/jquery.formstyler.min.js" />
<script src="js/theme/js/script.js" />

我运行不知道如何解决这个问题。当我在浏览器中打开它们时，原始 HTML 文件工作正常。我将感谢提供的所有建议

Answer 1

这里有几件事：

使用 HTML 文件和 Nuxt 应用程序与使用 Nuxt/Vue 进行构建过程的方式并不完全相同，因此您不能真正 link CSS/JS同理
你可能不需要在这里导入 jQuery 和很多东西，因为 Vue 比 jQuery 更强大而且更轻便.如果您真的想要它，这里是。
不要导入全局 CSS 或内联脚本，在 SFC 文件中使用常规 CSS 导入（需要时）并使用 NPM 导入包
在 Nuxt 应用程序中使用 Bootstrap 的最简单和正确的方法是
下次请告诉我们你做了很多研究，大部分答案已经可以通过搜索找到，我在这里解释了这些，因为很难理解首先瞄准哪里，因为您是新手，因为您努力正确地向我们展示了您的代码

Bootstrap 导航菜单正常打开但无法关闭

Bootstrap navigation menu opens normally but refuses to close

html

javascript

bootstrap-4

nuxt.js