Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Нужна помощь! (https://javascript.ru/forum/jquery/80397-nuzhna-pomoshh.html)

surin.89 31.05.2020 18:06

Нужна помощь!
 
Нужна помощь в реализации выбора города.
Ситуация такая. Есть некая переменная Пхп $siti, в которой выбран город. Есть список городов .list-siti, который выводится из бд(имеет свойство css display: none;). Нужно чтобы при запуске/обновлении страницы проверялось условие : если $siti = 0, тогда .list-siti.active. Выбор города работает при клике на определенный элемент, но нужна проверка именно на пустое значение. Реализация по клику:
$('#select-citi2, #select-citi').click(function(event){
$('.list-citis,#heder-top-menu').toggleClass('active');
$('body').toggleClass('lock');

});

Nexus 31.05.2020 22:03

Город - City

Почему не прокинуть в представление (view) значение вашей переменной и сразу же на сервере не добавить нужному блоку нужный класс?

surin.89 01.06.2020 02:07

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

laimas 01.06.2020 06:32

Цитата:

Сообщение от surin.89
если $siti = 0, тогда .list-siti.active

А если нет, что это означает? Данные для списка берутся из базы, это значит список строится циклом, значит в выводе:

параметр запроса определяющий выбор в списке приведенный к числу (пусть и $siti) определит и стиль списка, и выбор в нем:

<select class="list-citis <?=$siti?null:active?>">
в цикле вывода опций
<option value="значение из базы" <?=$siti==значению из базы?selected:null?>>


Город в английском - city.

zulfukar 10.06.2020 01:20

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

Nexus 10.06.2020 13:01

zulfukar, Попробуйте заменить строку:
if ( ! m.is(e.target) && ! n.is(e.target) &&  m.has(e.target).length === 0 && $(window).width() <= 900) {

на
var $target = $(e.target);
if ($(window).width() <= 900 && !$target.is(m) && !$target.has(m).length) {

zulfukar 10.06.2020 14:37

без изменений
вот сайт, если захотите посмотреть на работу меню: _http://new.313news.net

laimas 10.06.2020 16:54

Строка 14. Здесь непонятно зачем скрывать меню, если оно и так позиционируется за пределы клиентской области. Должно быть:

m.css({[set.position]:'-300px'}).removeClass('show');


Кстати, все эти определения можно вынести в CSS. Как и не понятно зачем строка 21, ее можно и удалить, а строки 25-31 заменить одной:

m.toggleClass('show').stop().animate({[set.position]:-300 + 300 * m.hasClass('show')}, 300);


Что касаемо пропадания меню, вы хотите чтобы на моб. устройствах щелчок вне меню не скрывал его?

zulfukar 10.06.2020 19:20

Цитата:

Сообщение от laimas (Сообщение 525662)
Строка 14. Здесь непонятно зачем скрывать меню, если оно и так позиционируется за пределы клиентской области. Должно быть:

m.css({[set.position]:'-300px'}).removeClass('show');


Кстати, все эти определения можно вынести в CSS. Как и не понятно зачем строка 21, ее можно и удалить, а строки 25-31 заменить одной:

m.toggleClass('show').stop().animate({[set.position]:-300 + 300 * m.hasClass('show')}, 300);

дело в том, что код я скопировал с чужего сайта. Сам я к сожалению в этом ничего не смыслю.
Сделал как Вы написали. Меню по прежнему пропадает при прокрутке страницы или при клике в любое место (кроме меню конечно же). И еще меню появилось справа от сайта его видно при горизонтальной прокрутке (оно не исчезает, а просто расположилось на правой границе сайта и выезжает оттуда при клике на кнопку toggle).
Цитата:

Что касаемо пропадания меню, вы хотите чтобы на моб. устройствах щелчок вне меню не скрывал его?
именно.

laimas 10.06.2020 19:49

Цитата:

Сообщение от 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, только управление.

zulfukar 10.06.2020 20:23

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

Я вставил Ваш код, можете посмотреть на сайте.

laimas 10.06.2020 20:33

Это с кодом который я публиковал - https://youtu.be/wiUeL81S6m0

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

laimas 10.06.2020 20:43

Даю пояснение к:

w = parseInt(m.css('width')); //ширина меню определенная в CSS, равная 300px
             
b.on('click', function() {
    m.toggleClass('show').stop().animate({
        [set.position]: 
            -w //к ширине меню взятой с отрицательным знаком
            + w * m.hasClass('show') //прибавляем ширину меню умноженную на булево значение m.hasClass('show')
//которое в начальном состоянии равно false (равно 0 в контексте умножения)
//поэтому -300 + 300 * 0 = -300
//а если меню открыто, то будет true (равно 1 в контексте умножения)
//поэтому -300 + 300 * 1 = 0
    }, 300);
});

zulfukar 10.06.2020 20:58

Цитата:

Сообщение от laimas (Сообщение 525669)
Это с кодом который я публиковал - https://youtu.be/wiUeL81S6m0

у меня так: http://webmark.com.ua/mobile/?url=ht...ew.313news.net

Цитата:

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

laimas 10.06.2020 21:03

Цитата:

Сообщение от zulfukar
не совсем понимаю, что мне нужно сделать

Проверять нужно все, путаница какая-то, которая вполне может быть от того, что вы взяли "чужое", и оно не работает должным образом в вашей "среде". Смотрите поведение меню в отладчике в разных устройствах (смотрите какая ширина экрана) - https://youtu.be/QtlDCcAchkU

laimas 10.06.2020 21:38

Для просмотра отображения на моб. устройствах не обязателен какой-то сервис, это сейчас могут делать и браузеры в отладчике. Выше видео, это в отладчике Opera. А вот как выглядит в отладчике FF https://youtu.be/Jraq1morMzQ

Таких огрехов как в Opera нет, но это не значит, что их нет вообще. Если оставить строки, о которых я говорил, то на моб. устройствах при смене ориентации (а это и есть изменение размера) меню торчит сбоку сразу.

В общем, либо $(window).resize(и тут корректируем, но должным образом), либо, что лучше, через CSS. В этом меню вообще можно многим управлять посредством CSS.

laimas 10.06.2020 21:41

Кнопку как я говорил выше, можно сразу добавить, а управлять ее видимостью средствами бутстрапа (у вас не нем верстка), определив для каких разрешений она должна быть скрыта. Как это сделать можно прочесть в документации для соответствующей версии.

laimas 10.06.2020 22:50

Напишу на CSS выдвижение меню, более не буду ничего смотреть, некогда.

В CSS:
#menu > ul {
		width: 300px;
	background: #778899;
	background: rgba(119, 136, 153);
		text-align: left;
		position: absolute !important;
        top: 48px;
        /* добавили это */
        right: -300px;
        transition: right 0.5s;
	}
    
    /* и добавили это */
    #menu > ul.show {
        right: 0;
    }


В коде страницы сразу добавляем кнопку скрытой для большого разрешения (hidden-md)

<div class="core" id="menu">
	    <div class="navbar hidden-md">
            <strong>
                <!-- значение атрибутов расставите -->
                <a href="#">
                    <img src="#" alt="#" />
                </a>
            </strong>
            <button class="toggle" title="Меню">
                <span></span><span></span><span></span>
            </button>
        </div>
.....


В JS:

(function($) {
	$.fn.menu = function() {
        
        //передавать параметр right не надо, он определяется в CSS 
		var b = this.find('button'), //кнопка
            m = this.children('ul'); //меню

		this.each(function() {
			
            //управляем анимацией меню
            b.on('click', function() {
				m.toggleClass('show')
            });

//код далее


PS. Я бы это b = this.find('button'), //кнопка, заменил на this.children('.navbar'), //кнопка, ибо не понять зачем strong с содержимым, а если нужен, то почему по нему нельзя меню показывать.

zulfukar 11.06.2020 02:46

Цитата:

Сообщение от laimas (Сообщение 525678)
Напишу на CSS выдвижение меню, более не буду ничего смотреть, некогда.

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

laimas 11.06.2020 02:48

На css не работает?! Значит вы где-то в чем-то допускаете ошибку.

laimas 12.06.2020 12:17

Посмотрел, что на странице удаленной, а не ней уже иное. Я просматривал код сохраненной страницы и все что писал относилось к сохраненному ее состоянию, подключаемых к ней стилей и скриптов. Вы не добавили указанные правила стилей меню в menu.css, а поэтому и нет никакой реакции.

Вообще принцип создать такое простое по структуре меню только на css следующий:

<style>
label {
    cursor: pointer;
}
li label {
    display: inline-block;
    width: 160px;
}
.btmenu {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 32px;
    font-weight: bold;
}
#bt {
    display: none;
}
#bt:checked + .menu {
    right: 0;
}
.menu {
    padding: 0;
    background-color: #5D5D5D;
    color: #fff;
    width: 200px;
    overflow: hidden;
    position: absolute;
    top: 30px;
    right: -200px;
    transition: right 0.5s;
}
.menu ul {
    display: none;
    padding: 10px;
}
.menu li {
    list-style: none;
    padding: 3px 5px;
    cursor: pointer;
}
.menu input {
    float: right;
}
.menu input:after {
    content: '►';
    width: 15px;
    height: 15px;
    background-color: #5D5D5D;
    color: #fff;
}
.menu input:checked:after {
    content: '▼';
}
.menu input:checked + ul {
    display: block;
}
</style>

<label class="btmenu" for="bt">≡</label><input type="checkbox" id="bt" />
<ul class="menu">
    <li>
        <label for="m1">Submenu 1</label><input type="checkbox" id="m1" />
        <ul>
            <li>Item 1-1</li>
            <li>Item 1-2</li>
            <li>Item 1-3</li>
        </ul>
    </li>
    <li>
        <label for="m2">Submenu 2</label><input type="checkbox" id="m2" />
        <ul>
            <li>Item 2-1</li>
            <li>Item 2-2</li>
            <li>Item 2-3</li>
        </ul>
    </li>
    <li>
        <label for="m3">Submenu 3</label><input type="checkbox" id="m3" />
        <ul>
            <li>Item 3-1</li>
            <li>Item 3-2</li>
            <li>Item 3-3</li>
        </ul>
    </li>
</ul>


Думаю, что в сети можно найти готовые хорошие решения таких чисто css меню.

Вы вязли нечто чужое и, видимо, как есть и впихнули себе, получив различные проблемы. Не стоит считать себя лузером только потому, что вся эта кухня программная на английском. Много описано и на родном языке, так что и чисто по русски можно не быть "челядью", если читать и изучать. ;)

Среди браузеров, браузер Firefox имеет отладчик, за мелким исключением, русифицированный, можно производить отладку или хотя бы контролировать, что на ваших страницах. А в ней подключается шрифт иконок icomoon. Если выделить кнопку поиска, то в отладчике в ее стилях можно видеть, что к этой кнопкой используется этот шрифт, а если раскрыть в инспекторе кода код кнопки и выделить в ней псевдоселектор ::before, то в правилах ее стилей увидим код какого символа этого шрифта используется - content: "\e926";

Конечно же, в шрифте icomoon есть и символ , и его нужно точно также использовать в кнопке меню, а не рисовать линии посредством span. Да и какая ссылка с картинкой может быть у этой кнопки вызывающей меню, как это у вас имеет место быть? Это должно быть только <button></button> с соответствующими стилями и все.

Кроме этого в отладчике можно разобраться и почему эти три кнопки при разных разрешениях могут и убегать за пределы экрана вправо.

zulfukar 13.06.2020 00:21

Вложений: 1
Я все добавил, но когда не заработало удалил. Пытался прикрутить другое меню но у него были свои недостатки.

В конечном счете выяснилось, что (не измененный) код прекрасно работает в опере (кажется Вы на нем и смотрели сайт).
Но, если удалить код
$(window).resize(isMenu);
и
$(window).resize(Res);

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

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

laimas 13.06.2020 09:30

Цитата:

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

Каждый браузер "видит мир" по своему и не только JS, но и CSS, и эти "разносторонние их взгляды" давно уже притча во языцех, а не сегодня, завтра, это случилось.

Я уже говорил - такое простое мобильное меню вполне может обойтись и без JS. Вот одно из них в виде урока - это одно и тоже меню (причем более чем с двумя уровнями) работающее на большом разрешении как горизонтальное, а на малых как вертикальное.

В CSS правилах встречается -moz..., -webkit..., progid:..., это как раз чтобы удовлетворить запросы всего "зоопарка браузеров".

zulfukar 21.06.2020 15:45

Цитата:

Сообщение от laimas (Сообщение 525729)
Среди браузеров, браузер Firefox имеет отладчик, за мелким исключением, русифицированный, можно производить отладку или хотя бы контролировать, что на ваших страницах.

Спасибо Вам за этот урок, очень полезная вещь, о существовании которой я не знал. Вообще за пару дней общения с Вами я многое узнал и сделал себе отличное меню, именно такое, какое хотел, с помощью отладчика исправил отображения во всех (основных) браузерах и устройствах (с разным разрешением экрана). Закончив работу я протестировал меню и выявил всего одну проблему - меню не раскрывается на ipad-е (смотрел с помощью отладчика!).
Сайт тот же: _http://new.313news.net
Проблема только если войти на сайт с ipad при размере экрана больше 1024 (901 < ∞), когда меню находится в раскрытом (горизонтальном) виде при наведении мышью на пункт меню должно выпадать подменю (как это происходит, если зайти на сайт с компа). Но так как на ipad нет мыши то при клике на пункт меню одновременно с выпадением меню обновляется страница сайта. Пробовал в скрипте прописать вместо "mouseenter mouseleave" "click", но это не помогло.
Вот скрипт:
var ww = document.body.clientWidth;

$(document).ready(function() {
	$(".navv li a").each(function() {
		if ($(this).next().length > 0) {
			$(this).addClass("parent");
		};
	})
	
	$(".toggleMenu").click(function(e) {
		e.preventDefault();
		$(this).toggleClass("active");
		$(".navv").toggle();
	});
	adjustMenu();
})

$(window).bind('resize orientationchange', function() {
	ww = document.body.clientWidth;
	adjustMenu();
});

var adjustMenu = function() {
	if (ww < 900) {
		$(".toggleMenu").css("display", "inline-block");
		if (!$(".toggleMenu").hasClass("active")) {
			$(".navv").hide();
		} else {
			$(".navv").show();
		}
		$(".navv li").unbind('mouseenter mouseleave');
		$(".navv li a.parent").unbind('click').bind('click', function(e) {
			// must be attached to anchor element to prevent bubbling
			e.preventDefault();
			$(this).parent("li").toggleClass("hover");
		});
	} 
	else if (ww >= 900) {
		$(".toggleMenu").css("display", "none");
		$(".navv").show();
		$(".navv li").removeClass("hover");
		$(".navv li a").unbind('click');
		$(".navv li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
		 	// must be attached to li so that mouseleave is not triggered when hover over submenu
		 	$(this).toggleClass('hover');
		});
	}
}

и стили
Код:

.navv {
    list-style: none;
    background:#fff;
    color: #000; font-weight: 400;
}
.navv:before,
.navv:after {
    content: " ";
    display: table;
}
.navv:after {
    clear: both;
}
.navv strong {background: #f00;
        font-weight: normal;
        padding: 10px 15px;
color: #fff;
display: block;
}
.navv ul {
    list-style: none;
    width: 15em;
    float:left;
}
.navv a {
    padding: 10px 15px;
    color:#000;
}
.navv li {
    position: relative;
}
.navv > li {
    float: left;
    border-top: 0px solid #ddd;
}
.navv > li > .parent {
    background-image: url("../images/downArrow.png");
    background-repeat: no-repeat;
    background-position: right;
}
.navv > li > a {
    display: block; padding: 0 1.2em; font-size: 18px; line-height: 36px; transition: all .2s ease-in-out;
}
.navv > li > a:hover {
    display: block; padding: 0 1.2em;
}
.navv li  ul {
    position: absolute;
    left: -9999px;
}
.navv > li.hover > ul {
    left: 0;
}
.navv li li.hover ul {
    left: 100%;
    top: 0;
}
.navv li li a {
    display: block;
    background: #ddd;
    position: relative;
    z-index:100;
    border-top: 1px solid #f0f0f0;
}
.navv li li a:hover {background-color: #f00; color: #fff;}
.navv li li li a {
    background:#ccc;
    z-index:200;
    border-top: 1px solid #ddd;
}

@media screen and (max-width: 900px) {
        .toggleMenu {
width: 30px; padding: 7px 0;
cursor: pointer;
outline: 0;
        }
        .toggleMenu > span {
    display: block;
    border-top: 2px solid #000;
    margin-top: 6px;
        }
.navv:before,
.navv:after {
    content: " ";
    display: table;
}
    .active {
        display: block;
    }
    .navv > li {
        float: none;
    }
    .navv > li > .parent {
        background-position: 95% 50%;
    }
    .navv li li .parent {
        background-image: url("../images/downArrow.png");
        background-repeat: no-repeat;
        background-position: 95% 50%;
    }
    .navv ul {
        display: block;
        width: 100%; top: 45px;
    position: relative;
    }
  .navv > li.hover > ul , .navv li li.hover ul {
        position: static;
    }

}

Помогите пожалуйста :)

P.S в шрифте icomoon символ ≡ был очень уродливым, поэтому я оставил вывод с помощью span.

laimas 21.06.2020 16:09

На айфоне, как и на прочих моб. устройствах экран сенсорный, там иные события. Можете как и с уроком найти готовое меню с поддержкой и моб. устройств. А если охота свое допилить, могу посоветовать jQuery Mobile, что это, вкратце можно узнать в сети.

zulfukar 21.06.2020 16:15

Цитата:

Сообщение от laimas (Сообщение 526207)
На айфоне, как и на прочих моб. устройствах экран сенсорный, там иные события. Можете как и с уроком найти готовое меню с поддержкой и моб. устройств. А если охота свое допилить, могу посоветовать jQuery Mobile, что это, вкратце можно узнать в сети.

так это меню тоже поддерживают все мобильные устройства. Проблема только на ipad.
это 4-ое меню, которое я ставлю на сайт. У каждого свои минусы. Я весь сайт сделал быстрее, чем это меню, с которым(и) больше месяца маюсь.

laimas 21.06.2020 16:22

Цитата:

Сообщение от zulfukar
Проблема только на ipad.

У меня нет моб. устройств этого бренда, я не могу ничего проверить, но я могу сказать точно, что на этих устройствах возникает проблема с css :hover. Об этом много в сети написано, если только в этом проблема, почитайте как ее решают, ну или подключите jQuery Mobile. Вы же используя jQuery не задумываетесь о поддержке js-кода различными браузерами, это за вас делает jQuery. Это же самое возлагает на себя и jQuery Mobile.

zulfukar 21.06.2020 16:24

Цитата:

Сообщение от laimas (Сообщение 526210)
К меня нет моб. устройств этого бренда, я не могу ничего проверить,

у меня тоже нет. я смотрю в отладчике как Вы учили.

laimas 21.06.2020 16:32

Цитата:

Сообщение от zulfukar
я смотрю в отладчике как Вы учили

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

Действительно "полноценные" эмуляторы, например, для Андроид, это эмуляторы в Android Studio IDE. Есть подобная среда и для iOS, на все ли платформы она есть и есть ли у нее подобные эмуляторы я сказать не могу.

zulfukar 21.06.2020 17:25

Цитата:

Сообщение от Rise (Сообщение 526218)
zulfukar,
Почитай как viewport meta tag работает, он был введен apple, сейчас это основа responsive design для mobile browsers.

у меня нет проблем с отображением. Мне нужно чтобы на ipad-е в моем меню подменю раскрывалось при помощи клика.

zulfukar 21.06.2020 19:16

Цитата:

Сообщение от laimas (Сообщение 526210)
У меня нет моб. устройств этого бренда, я не могу ничего проверить, но я могу сказать точно, что на этих устройствах возникает проблема с css :hover. Об этом много в сети написано, если только в этом проблема, почитайте как ее решают, ну или подключите jQuery Mobile.

Все оказалось намного проще. Сам сделал методом тыка, просто вместо этого куска кода
$(".navv li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
		 	// must be attached to li so that mouseleave is not triggered when hover over submenu
		 	$(this).toggleClass('hover');
		});

вставил
$(".navv li a.parent").unbind('click').bind('click', function(e) {
			// must be attached to anchor element to prevent bubbling
			e.preventDefault();
			$(this).parent("li").toggleClass("hover");
		});

и все работает так, как хотелось.

laimas 21.06.2020 19:28

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

zulfukar 21.06.2020 19:33

Цитата:

Сообщение от laimas (Сообщение 526223)
Тогда вообще не понять, что там за проблема, и зачем сначала удалять обработчик, затем сразу его же и устанавливать.

мне нужно было, чтобы на сенсорном экране подменю открывалось при клике на пункты меню. Сейчас я сделал так, что и на компе и на сенсорном экране подменю открывается только при клике. Это все, чего я хотел :)

laimas 21.06.2020 19:51

$(".navv li a.parent")
.unbind('click') //удаляет ранее установленный обработчик click
.bind('click' ... //устанавливает обработчик click


Это бессмыслица. У вас отменяет действие по умолчанию (переход) e.preventDefault();, а не unbind.

Что касается заменить открытие по наведению, то это у вас работает как раз на css. Ну если считаете, что теперь норма, пусть будет так.

zulfukar 21.06.2020 20:12

Цитата:

Сообщение от laimas (Сообщение 526227)
$(".navv li a.parent")
.unbind('click') //удаляет ранее установленный обработчик click
.bind('click' ... //устанавливает обработчик click


Это бессмыслица. У вас отменяет действие по умолчанию (переход) e.preventDefault();, а не unbind.

Что касается заменить открытие по наведению, то это у вас работает как раз на css. Ну если считаете, что теперь норма, пусть будет так.

ну я же не разбираюсь в этом. Напишите как должно быть.
Сейчас работает как надо. Если в коде есть что-то лишнее или какая-то ошибка, то напишите пожалуйста как будет правильно и я изменю.

оригинальный скрипт в этом сообщении.

laimas 21.06.2020 20:20

Цитата:

Сообщение от zulfukar
Напишите как должно быть.

$(".navv li a.parent").click(function(e) {
    e.preventDefault();
    //и далее ваш код
})


Это и есть чего хотелось.

Цитата:

Сообщение от zulfukar
Сейчас работает как надо.

Если вам надо открывать разделы горизонтального меню щелчком, то нужно подправить и CSS. Но тогда вопрос - зачем вся эта кухня? Правильно будет выбросить это меню вообще, взять то, что урок показывает. Оно все работает по щелчкам, насколько я помню. Плюс ему вообще не требуется JS/JQ, а если его сделать сплошной заливкой как у вас, то это упрощает и CSS, так как из него можно будет убрать градиентную заливку.

Но мы же не ищем легких путей, так? ;)

zulfukar 21.06.2020 20:25

Цитата:

Сообщение от laimas (Сообщение 526229)
$(".navv li a.parent").click(function(e) {
    e.preventDefault();
    //и далее ваш код
})


Это и есть чего хотелось.



Если вам надо открывать разделы горизонтального меню щелчком, то нужно подправить и CSS. Но тогда вопрос - зачем вся эта кухня? Правильно будет выбросить это меню вообще, взять то, что урок показывает. Оно все работает по щелчкам, насколько я помню. Плюс ему вообще не требуется JS/JQ, а если его сделать сплошной заливкой как у вас, то это упрощает и CSS, так как из него можно будет убрать градиентную заливку.

Но мы же не ищем легких путей, так? ;)

дело в том, что у меня в движке меню настраивается в админке, а на сайте выводится только {menu}
меню построено так: <ul><li></li></ul>, а в Вашем уроке есть лишние команды типа <label> и тд, которые мне некуда вставить. Мне пришлось искать меню имеющие такую структуру (<ul><li></li></ul>).

zulfukar 21.06.2020 20:59

Цитата:

Сообщение от laimas (Сообщение 526229)
$(".navv li a.parent").click(function(e) {
    e.preventDefault();
    //и далее ваш код
})

привел код к такому виду. Я правильно сделал? css править не пришлось, так как никаких изменений не произошло.
else if (ww >= 900) {
		$(".toggleMenu").css("display", "none");
		$(".navv").show();
		$(".navv li").removeClass("hover");
		$(".navv li a").unbind('click');
		$(".navv li a.parent").click(function(e) {
			e.preventDefault();
			$(this).parent("li").toggleClass("hover");
		});
	}

laimas 21.06.2020 21:01

Цитата:

Сообщение от zulfukar
дело в том, что у меня в движке меню настраивается в админке

В админке вы только разделы меню определяете, а вот код его определяется шаблоном, который можно подправить.

laimas 21.06.2020 21:18

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


Часовой пояс GMT +3, время: 21:40.