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

12
Z
На сайте с 11.06.2020
Offline
1
396

Здравствуйте. Есть код меню который нужно чуть подкорректировать. Дело в том, что при нажатии на кнопку 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
На сайте с 11.06.2020
Offline
1
#1

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

S
На сайте с 30.09.2016
Offline
469
#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
На сайте с 11.06.2020
Offline
1
#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
На сайте с 30.09.2016
Offline
469
#4
zulfukar:
Я впервые вижу, чтобы джава в разных браузерах по разному себя вел.

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

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

zulfukar:
Так не работает.
Только так и работает. А те гадания, что описаны выше, вообще не имеют отношения к вопросу.
Z
На сайте с 11.06.2020
Offline
1
#5
Sitealert:
Судя по написанному, Вы вообще впервые видите javascript.

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

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

Z0
На сайте с 03.09.2009
Offline
735
#6

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

Z
На сайте с 11.06.2020
Offline
1
#7
ziliboba0213:
jquery вроде кроссбраузерный же, или нет?

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

S
На сайте с 30.09.2016
Offline
469
#8

Ctrl+F5 ....

Z
На сайте с 11.06.2020
Offline
1
#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
На сайте с 30.09.2016
Offline
469
#10
zulfukar:
удалил. посмотрите пожалуйста сайт в хроме с телефона.

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

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

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий