單擊多級下拉菜單不顯示菜單

Question

我是網站中的多級下拉菜單，當我單擊主菜單時它顯示子菜單，但是當我單擊該子菜單時它向上滑動菜單而不顯示菜單，這是該代碼

 $('.main-menu ul li a').click(function(e) { if ($(this).next().hasClass('sub-menu')) { e.preventDefault(); $('.sub-menu').slideUp(); $('.main-menu ul li a').removeClass('active'); if ($(this).next('.sub-menu').is(':visible')) { $(this).removeClass('active'); $(this).next('.sub-menu').slideUp(); } else { $(this).addClass('active'); $(this).next('.sub-menu').slideToggle(); } } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main-menu"> <ul id="menu-main-menu" class="menu"> <li class="menu-item"> <a href="http://localhost/barcoun/"><span>Home</span></a> </li> <li class="menu-item"> <a href="http://localhost/barcoun/about-us/"><span>About Us</span></a> </li> <li class="menu-item"> <a href="http://localhost/barcoun/contact-us/"><span>Contact Us</span></a> </li> <li class="menu-item"> <a href="#" class="menu-image-title-after"><span>Enrolments</span></a> <ul class="sub-menu" style="display: none"> <li class="menu-item"> <a href="#"><span>Enrolment</span></a> <ul class="sub-menu" style="display: none"> <li class="menu-item"> <a href="http://localhost/barcoun/enrollment-details-by-bar-association/"><span>Enrolment Details</span></a> </li> </ul> </li> </ul> </li> </ul> </div> 

Answer 1

我不確定這是否是您要尋找的行為，但是如果您刪除了調用slideUp的第一行代碼，它似乎運行良好。

 $('.main-menu ul li a').click(function(e) { if($(this).next().hasClass('sub-menu')){ e.preventDefault(); // Remove this line: //$('.sub-menu').slideUp(); $('.main-menu ul li a').removeClass('active'); if ($(this).next('.sub-menu').is(':visible')) { $(this).removeClass('active'); $(this).next('.sub-menu').slideUp(); } else { $(this).addClass('active'); $(this).next('.sub-menu').slideToggle(); } } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main-menu"> <ul id="menu-main-menu" class="menu"> <li class="menu-item"><a href="http://localhost/barcoun/"><span>Home</span></a></li> <li class="menu-item"><a href="http://localhost/barcoun/about-us/"><span>About Us</span></a></li> <li class="menu-item"><a href="http://localhost/barcoun/contact-us/"><span>Contact Us</span></a></li> <li class="menu-item"><a href="#" class="menu-image-title-after"><span>Enrolments</span></a> <ul class="sub-menu"> <li class="menu-item"><a href="#"><span>Enrolment</span></a> <ul class="sub-menu"> <li class="menu-item"><a href="http://localhost/barcoun/enrollment-details-by-bar-association/" ><span>Enrolment Details</span></a></li> </ul> </li> </ul> </li> </ul> </div> 

Answer 2

只需擺脫這一行： $('.sub-menu').slideUp();

 $('.main-menu ul li a').click(function(e) { if ($(this).next().hasClass('sub-menu')) { e.preventDefault(); // $('.sub-menu').slideUp(); // <--- This is the culprit $('.main-menu ul li a').removeClass('active'); if ($(this).next('.sub-menu').is(':visible')) { $(this).removeClass('active'); $(this).next('.sub-menu').slideUp(); } else { $(this).addClass('active'); $(this).next('.sub-menu').slideToggle(); } } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main-menu"> <ul id="menu-main-menu" class="menu"> <li class="menu-item"> <a href="http://localhost/barcoun/"><span>Home</span></a> </li> <li class="menu-item"> <a href="http://localhost/barcoun/about-us/"><span>About Us</span></a> </li> <li class="menu-item"> <a href="http://localhost/barcoun/contact-us/"><span>Contact Us</span></a> </li> <li class="menu-item"> <a href="#" class="menu-image-title-after"><span>Enrolments</span></a> <ul class="sub-menu" style="display: none"> <li class="menu-item"> <a href="#"><span>Enrolment</span></a> <ul class="sub-menu" style="display: none"> <li class="menu-item"> <a href="http://localhost/barcoun/enrollment-details-by-bar-association/"><span>Enrolment Details I</span></a> </li> <li class="menu-item"> <a href="http://localhost/barcoun/enrollment-details-by-bar-association/"><span>Enrolment Details II</span></a> </li> <li class="menu-item"> <a href="http://localhost/barcoun/enrollment-details-by-bar-association/"><span>Enrolment Details III</span></a> </li> </ul> </li> </ul> </li> </ul> </div>