单击其他菜单项时隐藏当前子菜单

Question

I have created a header where I am having submenus and all. If I click on a menu where I have submenus for those menus it is working fine. But the problem is when I click on another menu which has submenus the previous one which we have clicked is not getting hidden. Both the menus are displaying which is active and inactive mode. Here is the code which I have written:

 //Javascript Code: $('.main-menu li a + ul').prev('a').append('<span class="caret"></span>'); $('.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(); } } }); 

 /*CSS:*/ .main-menu { width: 100%; position: relative; } .main-menu ul { list-style: none; font-size: 0; line-height: 0; text-align: right; } .main-menu ul li { display: inline-block; vertical-align: top; } .main-menu ul li a { padding: 42px 25px; color: #898E94; display: block; font-size: 16px; line-height: 18px; font-family: 'Roboto_reg'; } .side-nav { width: 340px; right: 0; position: absolute; background-color: #222222; top: 100px; z-index: 10; display: none; height: auto; } .side-nav ul li li a { padding-left: 70px; font-family: 'source_sans_proregular'; } .side-nav ul li a:hover { background-color: #ff3c1f; cursor: pointer; } .side-nav ul li a { color: white; font-size: 16px; line-height: 24px; padding: 15px 50px; display: block; position: relative; border-top: 1px solid transparent; } .side-nav.active { display: block; } .side-nav ul li ul { border-bottom: 1px solid rgba(255, 60, 31, 0.3); padding-bottom: 30px; } .side-nav ul li a.active { border-color: rgba(255, 60, 31, 0.3); } .sub-menu { display: none; } .side-nav ul li { position: relative; } .caret { position: absolute; width: 10px; height: 10px; top: 20px; right: 65px; border: 0; border-bottom: 1px solid #fff; border-left: 1px solid #fff; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .sub-menu li a { padding: 10px 25px !important; line-height: 0px !important; margin-top: -22px; } .sub-menu li a { margin-left: -237px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- HTML: --> <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="#" ><span>Menu3</span><span class="caret"></span></a> <ul class="sub-menu"> <li class="menu-item"><a href="http://localhost/bar/sumenu1/" ><span>submenu1</span></a></li> <li class="menu-item"><a href="http://localhost/bar/submenu2"><span>submenu2</span></a></li> <li class="menu-item"><a href="http://localhost/bar/sumenu5/" ><span>submenu5</span></a></li> <li class="menu-item"><a href="http://localhost/bar/sumenu6/" ><span >submenu6</span></a></li> <li class="menu-item"><a href="http://localhost/bar/sumenu7/" ><span>submenu7</span></a></li> </ul> </li> <li class="menu-item"> <a href="#"><span>Other Links</span><span class="caret"></span></a> <ul class="sub-menu"> <li class="menu-item"><a href="http://localhost/bar/sumenu8/" ><span>Submenu8</span></a></li> <li class="menu-item"><a href="http://localhost/bar/sumenu9/" ><span>Submenu9</span></a></li> <li class="menu-item"><a href="http://localhost/bar/sumenu10/" ><span>Submenu10</span></a></li> <li class="menu-item"><a href="http://localhost/bar/sumenu11/" ><span>Submenu11</span></a></li> </ul> </li> <li class="menu-item"><a href="http://localhost/barcoun/contact-us/"><span>Contact Us</span></a></li> </ul> </div> 

It is not displaying the arrow icon as well it is working fine in Mobile devices but getting problem in desktops.

Answer 1

I've edited your JavaScript Code to allow for toggling and hiding other active sub menus.

Edit: Edited css to fix the layout.

 $('.main-menu ul li a').click(function (e) { // remove the active class with every click var same = $(this).hasClass('active'); var siblings = $(this).parent('.menu-item').parent().children(); siblings.find('a.active + .sub-menu').slideUp(); siblings.find('a').removeClass('active'); if ($(this).next().hasClass('sub-menu') && !same) { e.preventDefault(); $(this).addClass('active'); $(this).next('.sub-menu').slideDown(); } }); 

 /*CSS:*/ .main-menu { width: 100%; position: relative; } .menu { list-style-type: none; } .menu-item { position: relative; display:inline-block; padding-right: 20px; } .sub-menu { padding-left: 0; display: none; position: absolute; top: 100%; left: 0; } .sub-menu.level-2 { left: 100%; } .caret { position: absolute; top: 5px; right: 5px; width: 0; height: 0; border-style: solid; border-width: 7px 7px 0 7px; border-color: #000 transparent transparent transparent; } .menu-item a.active .caret { border-width: 0 7px 7px 7px; border-color: transparent transparent #000 transparent; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- HTML: --> <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="#" ><span>Menu3</span><span class="caret"></span></a> <ul class="sub-menu"> <li class="menu-item"><a href="http://localhost/bar/sumenu1/" ><span>submenu1</span></a></li> <li class="menu-item"><a href="http://localhost/bar/submenu2"><span>submenu2</span></a></li> <li class="menu-item"><a href="http://localhost/bar/sumenu5/" ><span>submenu5</span></a></li> <li class="menu-item"><a href="http://localhost/bar/sumenu6/" ><span >submenu6</span></a></li> <li class="menu-item"><a href="http://localhost/bar/sumenu7/" ><span>submenu7</span></a></li> </ul> </li> <li class="menu-item"> <a href="#"><span>Other Links</span><span class="caret"></span></a> <ul class="sub-menu"> <li class="menu-item"><a href="#"> <span>Other Links</span><span class="caret"></span></a> <ul class="sub-menu level-2"> <li class="menu-item"><a href="http://localhost/bar/sumenu9/" ><span>SubSubMenu</span></a></li> </ul> </li> <li class="menu-item"><a href="http://localhost/bar/sumenu9/" ><span>Submenu9</span></a></li> <li class="menu-item"><a href="http://localhost/bar/sumenu10/" ><span>Submenu10</span></a></li> <li class="menu-item"><a href="http://localhost/bar/sumenu11/" ><span>Submenu11</span></a></li> </ul> </li> <li class="menu-item"><a href="http://localhost/barcoun/contact-us/"><span>Contact Us</span></a></li> </ul> </div>