Показать сообщение отдельно
  #18 (permalink)  
Старый 12.11.2019, 15:21
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Это закрытие меню при клике вне его. Здесь запускается событие click кнопки, в обработчик которого передается параметр 1. Это произойдет если меню раскрыто (!parseInt(mobMenu[0].style[options.side])) И источник не принадлежит меню (e.closest(mobMenu).length) ИЛИ это не кнопка меню (e.hasClass(options.classActive)).

В обработчике меню сдвигается от исходного положения (side) в направлении рассчитанным:

для кнопки: отступ меню + (ширина меню - отступ меню*3.5) * направление определяемое условием щелчка вне меню либо состоянием кнопки меню

для меню: отрицательная ширина меню + направление определяемое условием щелчка вне меню либо состоянием кнопки меню * ширина меню

Направление определяемое условием щелчка вне меню либо состоянием кнопки меню * ширина меню = c ? 0 : bt.hasClass(options.classActive). Можно в триггере в обработчик передавать значение -1, тогда это условие можно записать так:

c || bt.hasClass(options.classActive)

но в этом случае будет погрешность в 1px при сдвиге меню (можете вывести в консоль, поймете).

Если результат выводить в консоль, то станет понятна вся эта арифметика, получение -NNN или 0 для меню и NNN или 20 для кнопки.

Для кнопки и меню одно и тоже условие, значит его можно определить сразу. Но определение будет до изменения состояния кнопки меню, следовательно в этом случае нужно брать отрицание состояния кнопки.

return this.each(function () {

        bt.on('click touchend', function (e, c) {
            
            e.stopPropagation(); 
            var r = parseInt(p), 
            dir = c ? 0 : !bt.hasClass(options.classActive); //направление в анимации
            bt.toggleClass(options.classActive).delay(50).animate({[options.side]: r + (options.width - r*3.5) * dir}, options.animationSpeed);
            mobMenu.animate({[options.side]: -options.width + dir * options.width}, options.animationSpeed);
                
        })
    
    });


Это пример, и в примере время анимации состояния кнопки определяется временем анимации меню. Но на мой взгляд, если принять такое поведение меню, то за время анимации меню кнопка должна только сдвигаться к краю и изменять цвет, а после этого уже анимация состояния кнопки.

Это пример и в нем все упрощено, у вас же все написано так, что ... ) На Хабре, да и не только на нем, можно найти статьи о создании плагинов в jQ, там описано как это грамотно сделать - параметры, инициализация, методы.

Последний раз редактировалось laimas, 12.11.2019 в 15:58.
Ответить с цитированием