Bootstrap 为什么我的导航栏折叠切换在react中不起作用

ki1q1bka 于 2022-12-16 发布在 Bootstrap

关注(0)|答案(3)|浏览(177)

我想创建一个响应式导航栏。但是切换不起作用。我该怎么办？
我按照bootstrap文档中的说明添加了bootstrap、jQuery和popper.js链接，并创建了一个导航栏组件。导航栏的样式与未折叠时的样式相同，但折叠后，Toggle不起作用。

import React, { Component } from 'react';

import "jquery/dist/jquery"
import "bootstrap/dist/js/bootstrap";
import 'bootstrap/dist/css/bootstrap';

class Navbar extends Component {
    render() {
        return (
            <React.Fragment>
                
                <nav className="navbar navbar-expand-lg navbar-light bg-light">
                    <a className="navbar-brand" href="/">Aditya Chopra</a>
                    <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="/navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span className="navbar-toggler-icon"></span>
                    </button>

                    <div className="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul className="navbar-nav mr-auto">
                            
                            <li className="nav-item">
                                <a className="nav-link" href="/About">About</a>
                            </li>
                            <li className="nav-item">
                                <a className="nav-link" href="/Contact">Contact</a>
                            </li>
                            <li className="nav-item active">
                                <a className="nav-link" href="/Projects">Projects </a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </React.Fragment> 
        );
    }
}

export default Navbar;

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />

  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
  <title>Aditya Chopra</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

当视口足够小时，我期望它通过切换按钮展开导航栏，但它什么也不做。

twitter-bootstrap

来源：https://stackoverflow.com/questions/56207103/why-is-my-navbar-collapse-toggle-not-working-in-react

3条答案

按热度按时间

cbwuti441#

此处未正确设置data-target属性，

<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="/navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span className="navbar-toggler-icon"></span>
</button>

上述代码中的问题是data-target="/navbarSupportedContent"属性。
当您尝试使用id将toggler icon与菜单选项连接时，您应该像data-target="#navbarSupportedContent"一样使用#作为id，而不是使用/，这是toggler icon无法工作的原因。

赞(0）回复(0）举报 2022-12-16

1sbrub3j2#

请尝试https://react-bootstrap.github.io/components/navbar/或https://mdbootstrap.com/docs/jquery/navigation/navbar/。
当尝试在codepen中使用react-bootstrap时，我遇到了Nav.Link的问题，因此使用react-router中的链接。

const Navbar = ReactBootstrap.Navbar;
const Button = ReactBootstrap.Button;
const Form = ReactBootstrap.Form;
const NavDropdown = ReactBootstrap.NavDropdown;
const Nav = ReactBootstrap.Nav;
const FormControl = ReactBootstrap.FormControl;
const NavItem = ReactBootstrap.NavItem;
const Link = ReactRouter.Link;

class App extends React.Component {
  constructor(props) {
    super(props);
  }

    render() {
      return (
        <Navbar bg="light" expand="lg"> 
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
           <Navbar.Collapse id="basic-navbar-nav">
             <Nav className="mr-auto">
                <NavItem componentClass={Link} href="/" to="/">Home</NavItem>
               <NavItem componentClass={Link} href="/projects" to="/">Projects</NavItem>
               <NavItem componentClass={Link} href="/about" to="/">About us</NavItem>
               <NavItem componentClass={Link} href="/contact" to="/">Contact us</NavItem>
              </Nav>
              </Navbar.Collapse>
          </Navbar>
  );
}
};

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

半成品代码示例：https://codepen.io/vardamanpk/pen/dEzKOx

赞(0）回复(0）举报 2022-12-16

xtupzzrd3#

对于切换，你必须使用Jquery链接，对于Bootstrap 5没有Jquery，在Bootstrap 5中只有css和javascript链接，所以你宁愿选择Bootstrap 3或Bootstrap 4。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

赞(0）回复(0）举报 2022-12-16

我来回答

Bootstrap 为什么我的导航栏折叠切换在react中不起作用

3条答案

相关问题

热门标签

最新问答