0

Это мой первый скрипт, поэтому скорее всего тут куча идиотских решений. Его задача: открыть спрятанное меню при клике, затемнить некоторые элементы при открытом меню и точно также в другую сторону (+ при клике вне открытого меню). Есть также контактная форма (которая, кстати тоже не оч. корректно работает, но это другой вопрос), которая тоже появляется при клике на пункт меню и закрывается в случае клика на крестик (он тоже управляется этим скриптом). Меня раздражает дерганность процесса на боевом сервере. Хочется сделать лаконично и четко.

$(function() {
        var slideMenu = false;
        var slideForm = false;
        function removeOpen() {
            $("body, .face-page__title, .object__background-image, .footer, hr").removeClass('open');
            $(".logo-dark, .fb-dark, .vk-dark, .ins-dark").toggleClass('coverup');
            $(".logo, .fb, .vk, .ins").removeClass('coverup');
        }; 

        function addOpen() {
            $("body, .face-page__title, .object__background-image, .footer, hr").toggleClass('open');
            $(".logo, .fb, .vk, .ins").toggleClass('coverup');
            $(".logo-dark, .fb-dark, .vk-dark, .ins-dark").removeClass('coverup');
        }; 

        function formButton() {
            $( ".object__contact-form_activator" ).click(function(e) {
                e.stopPropagation();
                e.preventDefault();
                $(".object__contact-form").animate({left: '0vw'}, 200);
                slideForm = true;
            });
        };

        function menuButtonMobile() {
            $(".header__menu-button_icon").click(function(e) {
                e.preventDefault(e);
                if(slideMenu) {
                    $(this).removeClass('open');
                    $(".object__menu-slide-box").animate({left: '161vw'}, 200);
                    $(".object__contact-form").animate({left: '-100vw'}, 200);
                    $(".header, .header.scroll").removeClass('open');
                    slideForm = false;
                    slideMenu = false;
                } else {
                    $(this).toggleClass('open');
                    $(".object__menu-slide-box").animate({left: '0'}, 200);
                    $(".header, .header.scroll").addClass('open');
                    slideMenu = true;
                }
            });
        };

        if ( $(window).width() >= 320 &  $(window).width() < 479) {
            menuButtonMobile();
            formButton();
        } else if ( $(window).width() > 375 & $(window).width() < 415) {
            menuButtonMobile();
            formButton();
        } else if ( $(window).width() > 416 & $(window).width() < 1199) {
            menuButtonMobile();
            formButton();
        } else if ( $(window).width() > 1200) {   
            $(".header__menu-button_icon").click(function(e) {
                e.stopPropagation();
                e.preventDefault();
                if(slideMenu) {
                    $(this).removeClass('open');
                    $(".object__menu-slide-box").animate({left: '161vw'}, 200);
                    $(".object__contact-form").animate({left: '-61vw'}, 200);
                    $(".face-page__title_cases-menu, .face-page__title_cases-menu.fixed").removeClass('open');
                    removeOpen();
                    slideForm = false;
                    slideMenu = false;
                } else {
                    $(this).toggleClass('open');
                    $(".object__menu-slide-box").animate({left: '61vw'}, 200);
                    $(".face-page__title_cases-menu, .face-page__title_cases-menu.fixed").addClass('open');
                    addOpen();

                    slideMenu = true;
                }
            });
            formButton();
            $(window).click(function() {
                if(slideMenu && slideForm) {
                    e.stopPropagation();
                } else if (slideMenu) {
                    $(".header__menu-button_icon").removeClass('open');
                    $(".object__menu-slide-box").animate({left: '161vw'}, 200);
                    $(".object__contact-form").animate({left: '-61vw'}, 200);
                    $(".face-page__title_cases-menu, .face-page__title_cases-menu.fixed").removeClass('open');
                    removeOpen();
                    slideMenu = false;
                }
            });
        };
    });
3
  • 2
    было бы здорово, если бы вы воспроизвели проблему на jsfiddle.net, к примеру
    – Skywave
    25 янв 2018 в 12:15
  • 1
    @Skywave зачем предлагать jsfiddle, если тут есть встроенные сниппеты, которые ничем не хуже?
    – teran
    25 янв 2018 в 12:43
  • @Skywave ilyagoncharov.github.io/julonew.github.io 31 янв 2018 в 18:14

1 ответ 1

1

1) Что бы удобнее было разбираться залейте на jsfiddle.net например. 2) У вас в коде довольно много подобных моментов

function menuButtonMobile() {
     $(".header__menu-button_icon").click(function(e) {}} ????
if ( $(window).width() > 1200) {   
     $(".header__menu-button_icon").click(function(e) {}} ????

function formButton() {
     $( ".object__contact-form_activator" ).click(function(e) {}} ????

Инициализацию обработки нажатий надо производить в $(document).ready, а не внутри функций и условий. Возможно в этом и проблема.

$(document).ready(function(){
    $(".header__menu-button_icon").click(function(e) {
    // ваш код
    })

    $(".object__contact-form_activator" ).click(function(e) {
     // ваш код
    })
}
5
  • А разве это не то, что я сделал? По идее они должны хойститься же, ноу .. 31 янв 2018 в 18:57
  • по логике что происходит? Вы нажали 1 раз событие инициализировалось. Когда вы нажимаете второй раз довольно сложно предсказать работу. Ибо оно у вас и проходит инициализацию во второй раз и одновременно выполняет заданные действия по нажатию, которое инициализировалось в первый раз. Думаю именно из за этого у вас происходит "дерганность". т.к. события "дерутся" друг с другом. "А разве это не то, что я сделал?". Нет не то, в том примере, котором я показал - происходит инициализация событий, после того как документ будет готов. И при нажатии отрабатывают.
    – KordDEM
    1 фев 2018 в 5:16
  • Силюсь понять. Сейчас порядок таков: 1) шорткод для $(document).ready(function() 2) задекларировал все функции и переменные (разве это не инициализация?) 3) // объясняю, при каких условиях нужно это применить 1 фев 2018 в 10:51
  • Силюсь объяснить) У вас проблемы начинаются на втором пункте. Функции то вы объявили действительно, но работу в них(т.е. нажатие на такой, то элемент - не объявили); 3) После нажатия у вас они объявляются. З.ы. вы пытаетесь объединить 2 метода обработки событий. Вы либо из $( ".object__contact-form_activator" ).click(function(e) {}} вытаскивайте весь функционал в функцию. Либо вытаскивайте саму обработку $( ".object__contact-form_activator" ).click(function(e) {}} из объявленных функций.
    – KordDEM
    1 фев 2018 в 12:17
  • к вашему совету прислушался, код поправил. Проблема не ушла. Только когда я убрал все мелкие анимации (там, где я добавляю классы coverup и open) проблема решилась. Как бы реализовать эти анимации другим путем, чтобы не вернулся глитч ощущений этот. Пока в загадках 12 фев 2018 в 14:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.