Hello. I have a list:

$('.top').click(function() { if ($(this).hasClass('open-menu')) { $(this).removeClass('open-menu'); $(this).parent().children('.pod-menu').slideUp('slow'); } else { $(this).addClass('open-menu'); $(this).parent().children('.pod-menu').slideDown('slow'); } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li> <span class='top'>ОдСТда для ΠΌΠ°Π»Ρ‹ΡˆΠ΅ΠΉ</span> <div class='pod-menu'> <a>Π¨Π°ΠΏΠΊΠΈ</a> <a>ΠžΠ±ΡƒΠ²ΡŒ</a> </div> </li> <li> <span class='top'>ОдСТда для ΠΆΠ΅Π½Ρ‰ΠΈΠ½</span> <div class='pod-menu'> <a>Π¨Π°ΠΏΠΊΠΈ</a> <a>ΠžΠ±ΡƒΠ²ΡŒ</a> </div> </li> <li> <span class='top'>ОдСТда для ΠΌΡƒΠΆΡ‡ΠΈΠ½</span> <div class='pod-menu'> <a>Π¨Π°ΠΏΠΊΠΈ</a> <a>ΠžΠ±ΡƒΠ²ΡŒ</a> </div> </li> <ul>

By clicking on the top , I have dislpay: block added to the pod-menu , but if I click on another category, the previous category does not hide the submenu. Tell me how you can make it so that by clicking on one category of a submenu only hers would open, and the others would hide?

    1 answer 1

    We are looking for all the submenus, except the current one, and close it. I did not allocate the same code fragments to variables so that it would be clearer, but you should do it

     $('.pod-menu').slideUp() // $('.pod-menu').not($(this)).slideDown() $('.top').click(function () { if ($(this).hasClass('open-menu')) { $(this).removeClass('open-menu'); $(this).parent().children('.pod-menu').slideUp('slow'); } else { $(this).addClass('open-menu'); $('.pod-menu').not($(this).parent().children('.pod-menu')).slideUp() $(this).parent().children('.pod-menu').slideDown('slow'); } }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li> <span class='top'>ОдСТда для ΠΌΠ°Π»Ρ‹ΡˆΠ΅ΠΉ</span> <div class='pod-menu'> <a>Π¨Π°ΠΏΠΊΠΈ</a> <a>ΠžΠ±ΡƒΠ²ΡŒ</a> </div> </li> <li> <span class='top'>ОдСТда для ΠΆΠ΅Π½Ρ‰ΠΈΠ½</span> <div class='pod-menu'> <a>Π¨Π°ΠΏΠΊΠΈ</a> <a>ΠžΠ±ΡƒΠ²ΡŒ</a> </div> </li> <li> <span class='top'>ОдСТда для ΠΌΡƒΠΆΡ‡ΠΈΠ½</span> <div class='pod-menu'> <a>Π¨Π°ΠΏΠΊΠΈ</a> <a>ΠžΠ±ΡƒΠ²ΡŒ</a> </div> </li>