Hi everyone,
So I just took a dropdown code from the bootstrap site to put it in my navbar. At the end, I want to have some links to my pages in those dropdowns.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="{{pathFor route='Home'}}">Inventaire IT</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{{pathFor route='Home'}}">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Objets
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Appareils</a>
<a class="dropdown-item" href="#">Consommables</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Propriétés
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Modèles</a>
<a class="dropdown-item" href="#">Marques</a>
<a class="dropdown-item" href="#">Fournisseurs</a>
<a class="dropdown-item" href="#">Types de machine</a>
<a class="dropdown-item" href="#">Locaux</a>
<a class="dropdown-item" href="#">Lieux</a>
<a class="dropdown-item" href="#">Villes</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Rechercher" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Rechercher</button>
</form>
</div>
</nav>
Note that my bootstrap css works, just not for the dropdowns toggling.
After some research, I added an helper to handle the click event
Template.navBarTemplate.events({
'click .dropdown-toggle': function (e) {
e.preventDefault();
$(e.target).find('.dropdown-menu').toggle();
}
});
This doesn’t do the trick.
I installed bootstrap and his dependencies with npm like this :
meteor npm install jquery popper.js bootstrap
And then imported it in my main.js :
import 'bootstrap/dist/css/bootstrap.min.css';
Here are the packages versions from package.json :
"bootstrap": "^4.1.1",
"jquery": "^3.3.1",
"popper.js": "^1.14.3",
Any idea to get this working ?