Показать сообщение отдельно
  #10 (permalink)  
Старый 10.06.2020, 19:49
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от zulfukar
дело в том, что код я скопировал с чужего сайта. Сам я к сожалению в этом ничего не смыслю.
Я не стал разбираться во всем, но если удалить строки 12-21, то никакой проблемы это не вызовет. Если переписать ссылку на меню, на кнопку, и удалить обработчик $(document).mouseup ..., то все будет работать, и в моб. устройствах скрываться не будет. На настольных меню скрывается после ухода мыши.

Если объекту (меню) определяется некий параметр (тут position), то нужно использовать его, какой же смыл явно его прописывать ('right', а надо [set.position]). Тоже самое касается и размера меню (ширины), ее также либо передавать как параметр, либо получать из определения в стилях. Вот этого достаточно чтобы работало и скрывалось на моб. устройствах только кнопкой.

(function($) {
	$.fn.menu = function(opt) {

		var pos = $(this), set = $.extend({
			position: 'right'
		}, opt);

		this.each(function() {
			
            var b = $('<div class="navbar"><strong><a href="'+$.url+'"><img src="/template/'+$.temp+
                      '/images/logo-min.png" alt="'+$.site+'" /></a></strong><button class="toggle" title="Меню"><span></span><span></span><span></span></button></div>')
                    .prependTo(pos), //добавляем и находим кнопку, хотя все это может быть уже на странице, а в CSS описать условие когда она будет видима
                m = pos.children('ul'), //меню
                w = parseInt(m.css('width')); //ширина меню
            
            b.on('click', function() {
				m.toggleClass('show').stop().animate({[set.position]: -w + w * m.hasClass('show')}, 300);
            });
			
            function Res() {
				if ($(window).width() <= 900) {
					$('.item').siblings('ul').slideUp().removeClass('show');
				} else {
					$('.item').siblings('ul').slideDown();
				}
			}
			$(document).ready(Res); $(window).resize(Res);
            
            			
            $(this).find('.item').on('click', function() {
				if ($(this).siblings('ul').hasClass('show')) {
					$(this).removeClass('open');
					$(this).siblings('ul').slideUp(50).removeClass('show');
				} else {
					$(this).addClass('open');
					$(this).siblings('ul').slideDown(50).addClass('show');
				}
			});
		});
	};
})(jQuery);


PS. Можно toggleClass('show') также убрать, если этот класс не определяет что-либо присущее меню, а скрывать/показывать определять по позиции, то есть:

//вместо
m.toggleClass('show').stop().animate({[set.position]: -w + w * m.hasClass('show')}, 300);
//достаточно
m.stop().animate({[set.position]: -w - parseInt(m.css(set.position))}, 300);


Если управлять классом, то анимацию задать в CSS, а в JS только m.toggleClass('show') и все.

Сказанное "но если удалить строки 12-21, то никакой проблемы это не вызовет" к тому, что с этим кодом либо путаница, либо ошибки (проверка производилась с сохраненной страницы), то есть, при смене ориентации устройства не производит никакого эффекта. Лучше бы это все, как было ранее сказано, определить через CSS, а js, только управление.

Последний раз редактировалось laimas, 10.06.2020 в 20:22.
Ответить с цитированием