[英]Why is my navbar collapse toggle not working in react
我想創建一個響應式導航欄。 但是切換不起作用。 我應該怎么辦？
我添加了 bootstrap 文檔中指定的 bootstrap、jQuery 和 popper.js 鏈接，並創建了一個導航欄組件。 導航欄的樣式應該是未折疊時的樣式，但折疊后切換不起作用。
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;
索引.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>
當視口足夠小時，我希望它通過切換按鈕擴展導航欄，但它什么也沒做。
您的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與菜單選項連接時，應使用#作為id例如data-target="#navbarSupportedContent"而不是使用/ ，這是data-target="#navbarSupportedContent" toggler icon不起作用的原因。
嘗試https://react-bootstrap.github.io/components/navbar/或https://mdbootstrap.com/docs/jquery/navigation/navbar/ 。
當嘗試在Codepen中使用react-bootstrap時，我遇到了Nav.Link的問題，因此使用了react-router的Link。
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
For toggle, you have to use Jquery link and for Bootstrap 5 there is no Jquery, in Bootstrap 5 there is only css and javascript link, so you rather go for Bootstrap 3 or 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>
切換按鈕折疊在引導程序中的Bootstrap導航欄中不起作用
[英]Toggle button collapse not working in Bootstrap navbar in bootstrap
折疊在選擇 React Bootstrap Navbar 時 nextjs 不工作
[英]collapse On Select React Bootstrap Navbar with nextjs not working
Bootstrap toggle-collapse展開我的導航欄菜單，但不會折疊它
[英]Bootstrap toggle-collapse expands my navbar menu but won't collapse it
如何我的切換按鈕改變顏色只有我的崩潰在我的bootstrap 3導航欄中打開
[英]How to my toggle button change color only my collapse is opened in my bootstrap 3 navbar
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.