There is a drop down menu. Under it should go content. I made an additional menuMargin block, which is shown when the menu is open. Problems begin when I click on another menu link. enter image description here

jsfiddle

jQuery( document ).ready(function( $ ) { $(function () { var links = $('.menu a.parrent'); links.click(function (e) { links.not(this).siblings('ul').slideUp(300); $(this).siblings('ul').slideToggle(300); $('.menuMargin').slideToggle(300); }); }); });

How can this problem be solved?

    1 answer 1

    You are trying to cram all the logic into a few toggle, and there are actually a lot of logic: opening from the closed state, switching to another menu, closing the open menu. Just separate all the logic explicitly:

     $(function() { var links = $('.menu a.parrent'); var openMenu = null; links.click(function() { if (openMenu == this) { // закрыть меню links.siblings('ul').slideUp(300); $('.menuMargin').slideUp(300); openMenu = null; } else if (openMenu != null) { // переключить меню links.not(this).siblings('ul').slideUp(300); $(this).siblings('ul').slideDown(300); $('.menuMargin').slideDown(300); openMenu = this; } else { // открыть меню $(this).siblings('ul').slideDown(300); $('.menuMargin').slideDown(300); openMenu = this; } }); });