javascript - 折叠的导航栏不起作用反应和引导 5
问题描述
由于某种原因,在较小的屏幕上单击时,折叠的导航栏图标不会展开。我从 bootstrap 5 复制了示例,并确保包含 bootstrap css/js 和 jquery。
class NavBar extends Component {
render() {
return (
<div className="NavBar">
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<div className="container-fluid">
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNavAltMarkup">
<div className="navbar-nav mx-auto">
<HashLink className="navbar-brand" to="/#app">
Site
</HashLink>
<HashLink className="nav-link" to="/#about">
About
</HashLink>
<HashLink className="nav-link" to="/#skills">
Skills
</HashLink>
<HashLink className="nav-link" to="/#experience">
Experience
</HashLink>
<Link className="nav-link" to="/calculator">
Calculator
</Link>
</div>
</div>
</div>
</nav>
</div>
);
}
}
解决方案
我在这里找到了一个通过反应钩子起作用的答案:https ://dev.to/johnotu/how-to-toggle-bootstrap-navbar-collapse-button-in-react-without-jquery-joo
import React, { useState } from 'react';
import Logo from '../images/logo_512x512.png';
const TopNav = props => {
const [isNavCollapsed, setIsNavCollapsed] = useState(true);
const handleNavCollapse = () => setIsNavCollapsed(!isNavCollapsed);
return (
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
<a class="navbar-brand text-info font-weight-bolder" href="/">
<img src={Logo} alt="Logo" width="36" height="36" className="vertical-align-middle" />
<span className="">Discounter</span>
</a>
<button class="custom-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded={!isNavCollapsed ? true : false} aria-label="Toggle navigation" onClick={handleNavCollapse}>
<span class="navbar-toggler-icon"></span>
</button>
<div class={`${isNavCollapsed ? 'collapse' : ''} navbar-collapse`} id="navbarsExample09">
<a className="nav-link text-info" href="/contact">Support</a>
<a className="nav-link text-info" href="/login">Login</a>
<a href="/request-demo" className="btn btn-sm btn-info nav-link text-white" >Request demo</a>
</div>
</nav>
);
}
export default TopNav;
推荐阅读
- github - 在 github 操作中切换环境变量
- docker - 附加到正在运行的远程容器时如何使 VSCode 运行自定义脚本
- java - 如何将数据从返回活动传递到先前活动中的对话框?
- python - Error when installing Tensorflow - Python 3.8
- android - Filter a contact List through TextWatcher in Android
- android - Facebook login crashing while Facebook app is installed
- c++ - OpenGL缓冲区问题
- go - How to get Prometheus Node Exporter metrics with JSON format
- javascript - Remove button is not working when dynamic add fields
- swift - 迅速。通过按下按钮获得通知访问权限