Menu
I'm trying to get a Bootstrap dropdown working with my Jade layout. But actually I'm getting this error when I'm trying to execute $(".dropdown-toggle").dropdown in my Jade-File:
$ is undefined
$(".dropdown-toggle").dropdown is not a function
Why do I get this error message?
layout.jade
!!! 5
html
head
title= title
link(rel='stylesheet', href='/lib/bootstrap/css/bootstrap.min.css')
script(src='lib/bootstrap/js/bootstrap.min.js')
script(src='lib/jquery/jquery-1.7.1.min.js')
meta(name='viewport', content='width=device-width', initial-scale='1.0')
body!= body
index.jade
div.navbar.navbar-fixed-top
div.navbar-inner
div.container
a(data-toggle='collapse',data-target='.nav-collapse').btn.btn-navbar
a(href='#').brand #{title}
div.nav-collapse
ul.nav
li.active
a(href='#') Home
li
a(href='#') Blog
li
a(href='#') Contact
li(id='menu1').dropdown
a(data-toggle='dropdown', href='#menu1').dropdown-toogle Dropdown
b.caret
ul.dropdown-menu
li
a(href='#') Test
li
a(href='#') Test2
script
$('.dropdown-toggle').dropdown()
447
Why is my drop down menu not working in bootstrap? Solution : The dropdown should be toggled via data attributes or using javascript. In the above program, we have forgotten to add a data attribute so the dropdown is not working. So add data-bs-toggle="dropdown" to toggle the dropdown.
To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle="dropdown" attribute. The .caret class creates a caret arrow icon (), which indicates that the button is a dropdown. Add the .dropdown-menu class to a <ul> element to actually build the dropdown menu.
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is an intentional design decision. Dropdowns are built on a third party library, Popper.
Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with CSS.
You need to load the jQuery core before the bootstrap -
script(src='lib/jquery/jquery-1.7.1.min.js')
script(src='lib/bootstrap/js/bootstrap.min.js')
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
