Clicking on multilevel dropdown not displaying the menu

Question

I am multi level dropdown menu in my website.When i am clicking on main menu it is displaying the sub menu but when i am clicking on that submenu it is sliding up the menu not displaying the menu.Here is the code for that

 $('.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

I'm not sure if this is the behavior you are looking for but if you remove the first line of code that calls slideUp , it seems to be working fine.

 $('.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

Just get rid of this line: $('.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>