Показать сообщение отдельно
  #5 (permalink)  
Старый 10.06.2020, 01:20
Аспирант
Отправить личное сообщение для zulfukar Посмотреть профиль Найти все сообщения от zulfukar
 
Регистрация: 10.06.2020
Сообщений: 43

Здравствуйте. Есть код меню который нужно чуть подкорректировать. Дело в том, что при нажатии на кнопку toggle справа выезжает меню. Если на компе или телефоне пытаться прокрутить сайт ниже или при нажатии/клике в любое место на экране, меню тут же исчезает (заезжает на свое место). Т.е. если в меню много пунктов, то нижние пункты невозможно просмотреть, меню просто исчезает.
Помогите пожалуйста изменить код так, чтобы меню заезжало на свое место только при клике на кнопку toggle.

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

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

		this.each(function() {
			pos.prepend('<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>');

			var m = $('.navbar').next('ul');
			function isMenu() {
				if ($(window).width() <= 900) {
					m.css({'right':'-300px'}).removeClass('show').hide();
				}
				if ($(window).width() > 900) {
					m.show();
				}
			}
			$(document).ready(isMenu); $(window).resize(isMenu);
			m.css({'right':'-300px'}).removeClass('show').hide();

			var n = $('.toggle');
			$(this).find(".toggle").on('click', function() {
				if (m.hasClass('show')) {
						m.removeClass('show').stop().animate({'right':'-300px'}, 300, function() {
							m.hide();
						});
				} else {
						m.show().addClass('show').stop().animate({'right':'0px'});
				}
			});
			$(document).mouseup(function (e){
				if ( ! m.is(e.target) && ! n.is(e.target) &&  m.has(e.target).length === 0 && $(window).width() <= 900) {
						m.removeClass('show').stop().animate({'right':'-300px'}, 300, function() {
							m.hide();
						});
				}
			});
			pos.find('li ul').parent().addClass('ins');
			pos.find(".ins").prepend('<span class="item"></span>');
			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);


Подозреваю, что менять нужно тут, но не знаю как.
$(document).mouseup(function (e){
				if ( ! m.is(e.target) && ! n.is(e.target) &&  m.has(e.target).length === 0 && $(window).width() <= 900) {
						m.removeClass('show').stop().animate({'right':'-300px'}, 300, function() {
							m.hide();
						});
				}
			});

вместо .mouseup писал .click , пробовал разные варианты, но все без толку.
Ответить с цитированием