Question

我正在使用react + bootstrap开发页面。非常遗憾，当我按下按钮时，导航栏没有打开

我已经尝试过更改className，但是什么都没有

我也尝试将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

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

下面是有效的代码，在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>

如何解决无法打开的导航栏的问题？

1 个答案: