Problemi con JQuery per menu a discesa multi-livello

Ho lavorato sul menu di navigazione per un sito web che dovrebbe avere più livelli. Ho problemi con JQuery in termini di visualizzazione dei dropdown corretti al clic. Sono nuovo nell’usare Javascript e Jquery nelle pagine web, quindi apprezzo ogni aiuto che posso ottenere. Questo è quello che ho finora.

$('.dropdown').on('click', function() { $(this).children('.sub-menu').toggleClass('show'); }); 
 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: 15px 80px; } #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: 15px 25px; } #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: 15px 30px 0 35px; } #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: 15px 20px 0 16px; } #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: 15px 110px; } #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: 15px 75px; } #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: 15px 70px 0 300px; } #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: 15px 38px; } #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: 15px 19px 0 15px; } #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: 15px 90px; } #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: 15px 70px 0 320px; } #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: 15px 125px 0 115px; } #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: 15px 80px 0 70px; } #percussion-bar>li>a { text-decoration: none; } 
   

Ecco una demo funzionante, anche se i CSS devono essere corretti. Era un semplice codice JQuery, invece di toggleClass() , avevamo bisogno di usare i children quanto ci sono menu nidificati:

 $('.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: 15px 80px; } #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: 15px 25px; } #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: 15px 30px 0 35px; } #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: 15px 20px 0 16px; } #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: 15px 110px; } #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: 15px 75px; } #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: 15px 70px 0 300px; } #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: 15px 38px; } #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: 15px 19px 0 15px; } #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: 15px 90px; } #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: 15px 70px 0 320px; } #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: 15px 125px 0 115px; } #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: 15px 80px 0 70px; } #percussion-bar>li>a { text-decoration: none; } 
   

Il motivo principale del tuo problema è che i tag del sottomenu non solo hanno il .sub-menu class .sub-menu che ti indirizza al tuo jQuery, ma hanno anche degli ID e le regole CSS per questi ID contengono display: none che ha più specificità che un class. Quindi, per sovrascrivere che puoi usare !important sulla tua class .show (che non è così buono) …

 .show { display: block !important; } 

… o (meglio) rimuovere il display: block dalle regole CSS per quegli ID ( saxophone-bar flute-bar ecc.)