There is a menu for 3 points, each of which is a drop-down. By clicking on the menu item, a drop-down menu appears. But the problem is that I can open several such menus at the same time, and I need them to open in turn. And if one submenu is already open, then by clicking on the next menu item, the submenu was hidden. Submenu opening function:

$(function() { var touch = $('li .menu-link'); var w = $(window).width(); $(touch).on('click', function(e) { e.preventDefault(); var menu = $(this).closest('li').find('.dropdown-list'); menu.slideToggle(0); }); $(window).resize(function(){ var menu = $('li .menu-link ~ .dropdown-list'); if(w > 992 && menu.is(':hidden')) { menu.removeAttr('style'); } }); });

HTML:

 <ul class="menu-item-list desktop-menu"> <li> <a href="#" class="menu-link drop-down">Π‘ΠΈΠ»Π΅Ρ‚Ρ‹</a> <div class="dropdown-list"> <div class="menu-items"> <a href="#"><i style="color: #ff6f00;" class="material-icons">whatshot</i>БпСцпрСдлоТСния</a> <a href="#"><i style="color: #ffb300;" class="material-icons">star_rate</i>ΠŸΠΎΠΏΡƒΠ»ΡΡ€Π½Ρ‹Π΅ рСйсы</a> </div> </div> </li> <li> <a href="#" class="menu-link drop-down">Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ</a> <div class="dropdown-list"> <div class="menu-items"> <a href="#"><i style="color: #0277bd;" class="material-icons">airplanemode_active</i>Авиакомпании</a> <a href="#"><i style="color: #f44336;" class="material-icons">place</i>Аэропорты</a> </div> </div> </li> <li> <a href="#" class="menu-link drop-down">Компания</a> <div class="dropdown-list"> <div class="menu-items"> <a href="#"><i style="color: #8bc34a;" class="material-icons">info</i>О нас</a> <a href="#"><i style="color: #1565c0;" class="material-icons">help</i>ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ°</a> <a href="#"><i style="color: #607d8b;" class="material-icons">email</i>ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹</a> </div> </div> </li> <li><a href="#" class="menu-link profile-link"><i class="material-icons">person</i>Π›ΠΈΡ‡Π½Ρ‹ΠΉ ΠΊΠ°Π±ΠΈΠ½Π΅Ρ‚</a></li> </ul>
  • For decency, it was possible to attach html markup with styles. But to use slideToggle in this case is not necessary. You just have to hide everything, and one specific (on which the click was made) to push - Alexey Shimansky
  • @ Alexey Shimansky added html. There are 300 styles on it. - JamesJGoodwin
  • Possible duplicate question: Opening one submenu, but not all at once - stackanon

1 answer 1

The algorithm is as follows: first you need to close all the slideUp() submenus, and then if the "clicked" menu was closed, open it - slideDown()

 $(function() { var touch = $('li .menu-link'); var menuWrapper = $('.menu-item-list'); var w = $(window).width(); $('html').click(function() { menuWrapper.find('.dropdown-list').slideUp(0); }); menuWrapper.click(function(e) { e.stopPropagation(); }); $(touch).on('click', function(e) { e.preventDefault(); var menu = $(this).closest('li').find('.dropdown-list'); var isClosed = menu.is(':hidden'); // Π·Π°ΠΊΡ€Ρ‹Ρ‚ΠΎ Π»ΠΈ подмСню, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ ΠΊΠ»ΠΈΠΊΠ½ΡƒΠ»ΠΈ menuWrapper.find('.dropdown-list').slideUp(0); // Π·Π°ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ всС подмСню // Ссли мСню Π±Ρ‹Π»ΠΎ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΠΎ, Ρ‚ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ Π΅Π³ΠΎ if (isClosed) { menu.slideDown(0); } }); // ... }); 
 <div>outside</div> <ul class="menu-item-list desktop-menu"> <li> <a href="#" class="menu-link drop-down">Π‘ΠΈΠ»Π΅Ρ‚Ρ‹</a> <div class="dropdown-list"> <div class="menu-items"> <a href="#"><i style="color: #ff6f00;" class="material-icons">whatshot</i>БпСцпрСдлоТСния</a> <a href="#"><i style="color: #ffb300;" class="material-icons">star_rate</i>ΠŸΠΎΠΏΡƒΠ»ΡΡ€Π½Ρ‹Π΅ рСйсы</a> </div> </div> </li> <li> <a href="#" class="menu-link drop-down">Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ</a> <div class="dropdown-list"> <div class="menu-items"> <a href="#"><i style="color: #0277bd;" class="material-icons">airplanemode_active</i>Авиакомпании</a> <a href="#"><i style="color: #f44336;" class="material-icons">place</i>Аэропорты</a> </div> </div> </li> <li> <a href="#" class="menu-link drop-down">Компания</a> <div class="dropdown-list"> <div class="menu-items"> <a href="#"><i style="color: #8bc34a;" class="material-icons">info</i>О нас</a> <a href="#"><i style="color: #1565c0;" class="material-icons">help</i>ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ°</a> <a href="#"><i style="color: #607d8b;" class="material-icons">email</i>ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹</a> </div> </div> </li> <li><a href="#" class="menu-link profile-link"><i class="material-icons">person</i>Π›ΠΈΡ‡Π½Ρ‹ΠΉ ΠΊΠ°Π±ΠΈΠ½Π΅Ρ‚</a> </li> </ul> <script src="https://code.jquery.com/jquery-3.1.0.js"></script>

UPD.

Thank you, it works! One more question: can it be done so that if a click was made outside the dropdown list, then so that it closes?

You need to add a click handler on the entire page $('html').click(/*...*/) , in which you close all open menus. But if we work in the menu itself, then call e.stopPropagation(); - stops the "ascent" of the event call to the parent elements. You need to call it in an event where you do not need to "forcibly" close the menu (for example, inside a .menu-item-list ).

  • Thank you, it works! One more question: can it be done so that if a click was made outside the dropdown list, then so that it closes? - JamesJGoodwin
  • @JamesJGoodwin updated the answer - saaaaaaaaasha