Issue
I'm attempting to have my navbar collapsed menu expand when clicked when the screen is small. I'm using a navbar from Bootstrap that I've tweaked for my needs (splitting my links to each end of the bar). Right now, the links collapse when the screen gets small, but nothing happens when the accordion button is pressed.
Here are my dependencies
from the package.json:
"dependencies": {
"@angular/animations": "^17.0.0",
"@angular/common": "^17.0.0",
"@angular/compiler": "^17.0.0",
"@angular/core": "^17.0.0",
"@angular/forms": "^17.0.0",
"@angular/platform-browser": "^17.0.0",
"@angular/platform-browser-dynamic": "^17.0.0",
"@angular/platform-server": "^17.0.0",
"@angular/router": "^17.0.0",
"@angular/ssr": "^17.0.7",
"bootstrap": "^5.3.2",
"express": "^4.18.2",
"jquery": "^3.7.1",
"popper.js": "^1.16.1",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.2"
},
And here are my scripts and styles from the angular.json:
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
],
Finally here's my HTML:
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-primary navbar-fixed-top">
<img src="../../assets/fb-helmet.png" alt="Logo" class="helmet-logo">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Teams </a>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Seasons
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">2023</a>
<a class="dropdown-item" href="#">2022</a>
<a class="dropdown-item" href="#">2021</a>
</div>
</div>
</div>
</div>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup" >
<div class="navbar-nav" id="Auth-buttons">
<a class="nav-item nav-link" href="#">Sign In</a>
<a class="nav-item nav-link" href="#">Sign Up</a>
</div>
</div>
</nav>
</header>
So far I've tried adding these scripts from another related SO post here to the index.html file and running but there was no change. I've attempted to use the developer console to debug but I don't see the Bootstrap script file and putting a breakpoint on a mouse click didn't show me anything. Any help is appreciated.
Solution
You need to use data-bs-*
for Bootstrap 5 instead of data-*
which is for the version before Bootstrap 5.
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
...
<button
class="btn btn-secondary dropdown-toggle"
type="button"
id="dropdownMenuButton"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Seasons
</button>
As you import the Bootstrap Bundle (bootstrap.bundle.min.js), you can remove the jquery.json from the scripts
array in your angular.json file.
Answered By - Yong Shun
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.