单击多级下拉菜单不显示菜单

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>