css - 如何解决未打开导航栏的问题？

Question

我正在开发一个页面，使用react+bootstrap。很可惜，当我按下按钮时，我的导航栏没有打开

我已经尝试过更改类名，但没有成功

我还尝试链接 JQ 和 Bootstrap.js 没有任何帮助。 请帮帮我

const Header = () => {
  return (
    <nav className="navbar sticky-top navbar-expand-lg navbar-light">
      <a href="https://speedboostr.com/">
        <img src={Logo} />
      </a>
      <button
        className="navbar-toggler collapsed"
        type="button"
        data-toggle="collapse"
        data-target="#navbarCollapse"
        aria-controls="navbarCollapse"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        {" "}
        <span className="navbar-toggler-icon" />{" "}
      </button>
      <div
        className="collapse navbar-collapse justify-content-end"
        id="navbarCollapse"
      >
        <ul className="navbar-nav">
          <li className="nav-item">
            <a className="nav-link" href="https://speedboostr.com">
              HOME
            </a>
          </li>
          <li className="nav-item">
            <a
              className="nav-link active"
              href="https://analyze.speedboostr.com"
            >
              SHOPIFY ANALYZER
            </a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="https://speedboostr.com/services">
              SERVICES
            </a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="https://speedboostr.com/about">
              ABOUT
            </a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="https://speedboostr.com/contact">
              CONTACT
            </a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="https://speedboostr.com/blog">
              LEVEL UP (BLOG)
            </a>
          </li>
        </ul>
      </div>
    </nav>
  );
};

我希望导航栏下拉

Answer 1

我的假设是您没有在 index.html 中或作为 npm 包包含 bootstrap.js 和 jquery。

下面是工作代码和工作codesandbox link

Header.js

import React from "react";

const Header = () => {
  return (
    <nav className="navbar sticky-top navbar-expand-lg navbar-light">
      <a class="navbar-brand" href="#">
        Navbar
      </a>
      <button
        className="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarCollapse"
        aria-controls="navbarCollapse"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        {""}
        <span className="navbar-toggler-icon" />{" "}
      </button>

      {/* Navbar links */}
      <div
        className="collapse navbar-collapse justify-content-end"
        id="navbarCollapse"
      >
        <ul className="navbar-nav">
          <li className="nav-item">
            <a className="nav-link" href="https://speedboostr.com">
              HOME
            </a>
          </li>
          <li className="nav-item">
            <a
              className="nav-link active"
              href="https://analyze.speedboostr.com"
            >
              SHOPIFY ANALYZER
            </a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="https://speedboostr.com/services">
              SERVICES
            </a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="https://speedboostr.com/about">
              ABOUT
            </a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="https://speedboostr.com/contact">
              CONTACT
            </a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="https://speedboostr.com/blog">
              LEVEL UP (BLOG)
            </a>
          </li>
        </ul>
      </div>
    </nav>
  );
};
export default Header;

在 index.html 中包含这些脚本

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>