Нужно чтобы при нажатии менюшки dropdown меню, область контента сдвигалась вниз. Написал простой скрипт, но его работа не поддаётся моей логике!?

Question

[Александр Тимофеев]

$("*").click(function(){
                    
//                    if($(".dropdown:first-child").hasClass("open")){
//                        $(".area-pizza").css("margin-top","0px");
//                    }else{
//                        $(".area-pizza").css("margin-top","170px");
//                    };
                    
                    
                        if($(".dropdown:nth-child(2)").hasClass("open")){
                            $(".area-pizza").css("margin-top","90px");
                        }else{
                            $(".area-pizza").css("margin-top","0px");
                        };
                    
                    
                });

Во втором случае, который не закомментирован, по логике при клике на любой области экрана должно проверяться наличие класса .open у менюшки, сам этот класс .open у неё должен быть, если она открыта (это bootstrap).
В общем не пойму почему не работает, вернее работает, но каким-то почти хаотическим образом.

Comments

[ColdSpirit]

С такими данными вам вряд ли кто-то ответит, приведите пример в https://jsfiddle.net/

Answer 1

[Юрий Чижов]

слушать клик по всему дому на протяжении работы всей страницы? классное решение. по-хорошему при открытии меню надо биндить клик на "не меню", а при закрытии бинд этот удалять. да и со стилями тоже не самая лучшая практика. правильнее будет всё таки контролировать это из цсски, классами типа 'active' родителя и по наличию этого класса уже играться со стилями. ах да, на счет хаотичности. '*' это все элементы. включая родителей того по кому ты кликнул. кликаются ВСЕ СРАЗУ. поэтому - если в дереве четное количество родителей - то срабатывает, если не четное - то нет.
Я использую что-то такое

$(".sidebar-toggle").on('click', function(){ // клик по кноке открытия
    var h = $("aside.sidebar") //блок который должен открываться
    if($(this).is('.active')) { // если кликнутое меню уже открыто - закрываем
      $(this).removeClass("active"); //удаляем подсвечивание открытого меню
      h.removeClass("active"); //закрываем
      $(document).unbind('.closeMobileMenu'); // удаляем бинд закрытия меню
    } else {
      $(this).addClass("active"); //подсвечиваем открытое
      h.addClass("active"); //открываем
      $(document).bind('touchend.closeMobileMenu click.closeMobileMenu', function(e) { //событие клик по документу
        if (!h.is(e.target) && $(e.target).closest(h).length === 0 && !$(".sidebar-toggle").is(e.target)) { //если это не тот блок, что показывается
          $(".sidebar-toggle").click(); //кликаем второй раз что бы закрылось (тут вообще должно быть полноценное закрытие а не второй клик)
        }
      });
    }
    return false;
  });

Answer 2

[Антон Шаманов]

Это бунт машин! срочно выбрасывай системник из окна :)

Comments

[Антон Шаманов]

А если серьезно то ты же должен изменять эти значение при клике\наведении т.к. меню может быть многоуровневым и надо изменять конкретный элемент используя this