jQuery меню пропадает при прокрутке страницы

1

zulfukar

11 июня 2020, 16:22

430

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

Помогите пожалуйста изменить код так, чтобы меню заезжало на свое место только при клике на кнопку toggle.

посмотреть на работу меню: http://new.313news.net

(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);

Z

1

zulfukar

12 июня 2020, 13:18

#1

никто не знает?

S

469

Sitealert

12 июня 2020, 18:14

#2

Это убери:

$(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();
        });
    }
});

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.

Z

1

zulfukar

12 июня 2020, 21:18

#3

В результате выяснилось, что код прекрасно работает в опере.

Если удалить в 2 местах код

$(window).resize(isMenu);

то работает и в мозилле. Но в хроме работать никак не хочет. А я все это время его именно в хроме проверял. После удаления кода приведенного выше в хроме при входе на сайт меню в раскрытом виде расположено слева и при клике на кнопку toggle перемещается в правую часть сайта, а при повторном клике на toggle скрывается. Естественно все это я просматриваю с телефона!

Итак, в мозилле и опере все работает. Причем в опере работает без всяких удалений (т.е. код который я привел в первом сообщении нормально работает в опере).

Я впервые вижу, чтобы джава в разных браузерах по разному себя вел.

---------- Добавлено 12.06.2020 в 21:46 ----------

Точнее если удалить

$(window).resize(isMenu);

и

$(window).resize(Res);

то работает и в мозилле.

---------- Добавлено 12.06.2020 в 21:48 ----------

В результате выяснилось, что код прекрасно работает в опере.

Если удалить

$(window).resize(isMenu);

и

$(window).resize(Res);

то работает и в мозилле. Но в хроме работать никак не хочет. А я все это время его именно в хроме проверял. После удаления кода приведенного выше в хроме при входе на сайт меню в раскрытом виде расположено слева и при клике на кнопку toggle перемещается в правую часть сайта, а при повторном клике на toggle скрывается. Естественно все это я просматриваю с телефона!

Итак, в мозилле и опере все работает. Причем в опере работает без всяких удалений (т.е. код который я привел в первом сообщении нормально работает в опере).

Я впервые вижу, чтобы джава в разных браузерах по разному себя вел.

---------- Добавлено 12.06.2020 в 21:49 ----------

, глюк. сообщение можно удалить

---------- Добавлено 12.06.2020 в 21:51 ----------

Sitealert:
Это убери:

$(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();

        });

    }

});

Так не работает.

Выяснилось, что код прекрасно работает в опере.

Если удалить

$(window).resize(isMenu);

и

$(window).resize(Res);

то работает и в мозилле. Но в хроме работать никак не хочет. А я все это время его именно в хроме проверял. После удаления кода приведенного выше в хроме при входе на сайт меню в раскрытом виде расположено слева и при клике на кнопку toggle перемещается в правую часть сайта, а при повторном клике на toggle скрывается. Естественно все это я просматриваю с телефона!

Итак, в мозилле и опере все работает. Причем в опере работает без всяких удалений (т.е. код который я привел в первом сообщении нормально работает в опере).

Я впервые вижу, чтобы джава в разных браузерах по разному себя вел.

Сайт в разных браузерах Рекламный блок «Наезд» и Странно отображается бегун на

S

469

Sitealert

12 июня 2020, 22:08

#4

zulfukar:
Я впервые вижу, чтобы джава в разных браузерах по разному себя вел.

Судя по написанному, Вы вообще впервые видите javascript.

---------- Добавлено 13.06.2020 в 01:13 ----------

zulfukar:
Так не работает.

Только так и работает. А те гадания, что описаны выше, вообще не имеют отношения к вопросу.

1

Z

1

zulfukar

12 июня 2020, 22:15

#5

Sitealert:
Судя по написанному, Вы вообще впервые видите javascript.

Только так и работает.

Да, но у меня не работает. Я удалил тот кусок кода, но ничего не изменилось.

Z0

789

ziliboba0213

12 июня 2020, 22:18

#6

jquery вроде кроссбраузерный же, или нет?

Z

1

zulfukar

12 июня 2020, 22:21

#7

ziliboba0213:
jquery вроде кроссбраузерный же, или нет?

тоже так думал, пока не наткнулся на этот код.

S

469

Sitealert

12 июня 2020, 22:21

#8

Ctrl+F5 ....

Z

1

zulfukar

12 июня 2020, 22:24

#9

Sitealert:
Это убери:

$(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();

        });

    }

});

удалил. посмотрите пожалуйста сайт в хроме с телефона.

---------- Добавлено 12.06.2020 в 22:25 ----------

zulfukar:
удалил. посмотрите пожалуйста сайт в хроме с телефона.

http://new.313news.net

S

469

Sitealert

12 июня 2020, 22:31

#10

zulfukar:
удалил. посмотрите пожалуйста сайт в хроме с телефона.

Я и на ноуте вижу, что работает.

Почистите кэш браузера или добавьте к вызову скрипта get-параметр.

Курс биткоина превысил $50 тысяч

Что делать, если ваша email-рассылка попала в спам