Trouble With Jquery For Multi-level Dropdown
I've been working on the nav menu for a website that should have multiple levels. I'm having trouble with the JQuery in terms of having the correct drop downs appear on click. I'm
Solution 1:
Here is a working demo, though CSS needs to be fixed. It was a simple JQuery code, instead of toggleClass()
, we needed to use children
as there are nested menus:
$('.dropdown a').on('click', function(e) {
e.preventDefault();
var ullist = $(this).parent().children('ul:first');
ullist.slideToggle();
});
body {
margin: 0;
padding: 0;
}
.show {
display: block;
}
#main-bar {
list-style-type: none;
height: 50px;
}
#main-bar>li {
float: left;
border: 1px solid black;
padding: 15px80px;
}
#main-bar>li>a {
text-decoration: none;
}
#product-bar {
//position: absolute;
min-width: 1154px;
border: 1px solid black;
margin-left: -81px;
margin-top: 15px;
height: 50px;
list-style-type: none;
display: none;
}
#product-bar>li {
float: left;
padding: 15px25px;
}
#product-bar>li>a {
text-decoration: none;
}
#clarinet-bar {
//position: absolute;
min-width: 1154px;
border: 1px solid black;
margin-left: -71px;
margin-top: 17px;
height: 50px;
list-style-type: none;
display: none;
}
#clarinet-bar>li {
float: left;
padding: 15px30px035px;
}
#clarinet-bar>li>a {
text-decoration: none;
}
#saxophone-bar {
//position: absolute;
min-width: 1154px;
border: 1px solid black;
margin-left: -183px;
margin-top: 17px;
height: 50px;
list-style-type: none;
display: none;
}
#saxophone-bar>li {
float: left;
padding: 15px20px016px;
}
#saxophone-bar>li>a {
text-decoration: none;
}
#flute-bar {
//position: absolute;
min-width: 1154px;
border: 1px solid black;
margin-left: -314px;
margin-top: 17px;
height: 50px;
list-style-type: none;
display: none;
}
#flute-bar>li {
float: left;
padding: 15px110px;
}
#flute-bar>li>a {
text-decoration: none;
}
#oboe-bar {
//position: absolute;
min-width: 1154px;
border: 1px solid black;
margin-left: -372px;
margin-top: 17px;
height: 50px;
list-style-type: none;
display: none;
}
#oboe-bar>li {
float: left;
padding: 15px75px;
}
#oboe-bar>li>a {
text-decoration: none;
}
#bassoon-bar {
//position: absolute;
min-width: 1154px;
border: 1px solid black;
margin-left: -456px;
margin-top: 17px;
height: 50px;
list-style-type: none;
display: none;
}
#bassoon-bar>li {
float: left;
padding: 15px70px0300px;
}
#bassoon-bar>li>a {
text-decoration: none;
}
#recorder-bar {
//position: absolute;
min-width: 1154px;
border: 1px solid black;
margin-left: -560px;
margin-top: 17px;
height: 50px;
list-style-type: none;
display: none;
}
#recorder-bar>li {
float: left;
padding: 15px38px;
}
#recorder-bar>li>a {
text-decoration: none;
}
#brass-bar {
//position: absolute;
min-width: 1154px;
border: 1px solid black;
margin-left: -669px;
margin-top: 17px;
height: 50px;
list-style-type: none;
display: none;
}
#brass-bar>li {
float: left;
padding: 15px19px015px;
}
#brass-bar>li>a {
text-decoration: none;
}
#guitar-bar {
//position: absolute;
min-width: 1154px;
border: 1px solid black;
margin-left: -755px;
margin-top: 17px;
height: 50px;
list-style-type: none;
display: none;
}
#guitar-bar>li {
float: left;
padding: 15px90px;
}
#guitar-bar>li>a {
text-decoration: none;
}
#piano-bar {
//position: absolute;
min-width: 1154px;
border: 1px solid black;
margin-left: -846px;
margin-top: 17px;
height: 50px;
list-style-type: none;
display: none;
}
#piano-bar>li {
float: left;
padding: 15px70px0320px;
}
#piano-bar>li>a {
text-decoration: none;
}
#orchestral-bar {
position: absolute;
min-width: 1154px;
border: 1px solid black;
margin-left: -932px;
margin-top: 17px;
height: 50px;
list-style-type: none;
display: none;
}
#orchestral-bar>li {
float: left;
padding: 15px125px0115px;
}
#piano-bar>li>a {
text-decoration: none;
}
#percussion-bar {
position: absolute;
min-width: 1154px;
border: 1px solid black;
margin-left: -1049px;
margin-top: 17px;
height: 50px;
list-style-type: none;
display: none;
}
#percussion-bar>li {
float: left;
padding: 15px80px070px;
}
#percussion-bar>li>a {
text-decoration: none;
}
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><nav><ulid="main-bar"><liclass="dropdown"><ahref="#">Product</a><ulid="product-bar"class="sub-menu"><liclass="dropdown"><ahref="#"class="test">Clarinet</a><ulid="clarinet-bar"class="sub-menu"><li><ahref="#">Bb Clarinet</a></li><li><ahref="#">Bass Clarinet</a></li><li><ahref="#">Eb Clarinet</a></li><li><ahref="#">Alto Clarinet</a></li><li><ahref="#">Contrabass Clarinet</a></li><li><ahref="#">Contra-Alto Clarinet</a></li><li><ahref="#">Basset Horn</a></li></ul></li><liclass="dropdown"><ahref="#">Saxophone</a><ulid="saxophone-bar"class="sub-menu"><li><ahref="#">Alto Saxophone</a></li><li><ahref="#">Tenor Saxophone</a></li><li><ahref="#">Baritone Saxophone</a></li><li><ahref="#">Soprano Saxophone</a></li><li><ahref="#">Sopranino Saxophone</a></li><li><ahref="#">Bass Saxophone</a></li><li><ahref="#">Contrabass Saxophone</a></li></ul></li><liclass="dropdown"><ahref="#">Flute</a><ulid="flute-bar"class="sub-menu"><li><ahref="#">Flute</a></li><li><ahref="#">Alto Flute</a></li><li><ahref="#">Bass Flute</a></li><li><ahref="#">Piccolo</a></li></ul></li><liclass="dropdown"><ahref="#">Oboe</a><ulid="oboe-bar"class="sub-menu"><li><ahref="#">Oboe</a></li><li><ahref="#">Oboe D'amore</a></li><li><ahref="#">English Horn</a></li><li><ahref="#">Bass Oboe</a></li><li><ahref="#">Piccolo Oboe</a></li></ul></li><liclass="dropdown"><ahref="#">Bassoon</a><ulid="bassoon-bar"class="sub-menu"><li><ahref="#">Bassoon</a></li><li><ahref="#">Contrabassoon</a></li></ul></li><liclass="dropdown"><ahref="#">Recorder</a><ulid="recorder-bar"class="sub-menu"><li><ahref="#">Alto Recorder</a></li><li><ahref="#">Tenor Recorder</a></li><li><ahref="#">Soprano Recorder</a></li><li><ahref="#">Bass Recorder</a></li><li><ahref="#">Great Bass Recorder</a></li><li><ahref="#">Piccolo Recorder</a></li></ul></li><liclass="dropdown"><ahref="#">Brass</a><ulid="brass-bar"class="sub-menu"><li><ahref="#">Trumpet</a></li><li><ahref="#">Trombone</a></li><li><ahref="#">Cornet</a></li><li><ahref="#">French Horn</a></li><li><ahref="#">Tuba</a></li><li><ahref="#">Flugelhorn</a></li><li><ahref="#">Euphonium</a></li><li><ahref="#">Mellophone</a></li><li><ahref="#">Alto Horn</a></li><li><ahref="#">Tenor Horn</a></li><li><ahref="#">Baritone Horn</a></li></ul></li><li><ahref="#">Guitar</a><ulid="guitar-bar"class="sub-menu"><li><ahref="#">Electic Guitar</a></li><li><ahref="#">Acoustic Guitar</a></li><li><ahref="#">Classical Guitar</a></li><li><ahref="#">Bass Guitar</a></li></ul></li><li><ahref="#">Piano</a><ulid="piano-bar"class="sub-menu"><li><ahref="#">Piano</a></li><li><ahref="#">Keyboard</a></li></ul></li><li><ahref="#">Orchestral</a><ulid="orchestral-bar"class="sub-menu"><li><ahref="#">Violin</a></li><li><ahref="#">Viola</a></li><li><ahref="#">Cello</a></li><li><ahref="#">Bass</a></li></ul></li><li><ahref="#">Percussion</a><ulid="percussion-bar"class="sub-menu"><li><ahref="#">Keyboard Percussion</a></li><li><ahref="#">Mallet Percussion</a></li><li><ahref="#">Marching Percussion</a></li><li><ahref="#">General Percussion</a></li></ul></li></ul><!--closes product-bar--></li><!--closes product list item that is holding all the products--><li><ahref="#">Shop By Brands</a></li><li><ahref="#">How to Order</a></li><li><ahref="#">Quick Order</a></li><li><ahref="#">About Us</a></li></ul><!--closes main-bar--></nav>
Solution 2:
The main reason for your problem is that the submenu tags not only have the class .sub-menu
which is addressed you your jQuery, but they also have IDs, and the CSS rules for these IDs contain display: none
which has more specifity that a class. So in order to overwrite that you either can use !important
on your .show
class (which is not that good)…
.show {
display: block !important;
}
…or (better) remove the display: block
from the CSS rules for those IDs (saxophone-bar
, flute-bar
etc.)
Post a Comment for "Trouble With Jquery For Multi-level Dropdown"