Нужна помощь!
Нужна помощь в реализации выбора города.
Ситуация такая. Есть некая переменная Пхп $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'); }); |
Город - City
Почему не прокинуть в представление (view) значение вашей переменной и сразу же на сервере не добавить нужному блоку нужный класс? |
Нужно чтобы список открывался только тогда, когда переменная равна нулю. Я не понял ваш вариант.
|
Цитата:
параметр запроса определяющий выбор в списке приведенный к числу (пусть и $siti) определит и стиль списка, и выбор в нем: <select class="list-citis <?=$siti?null:active?>"> в цикле вывода опций <option value="значение из базы" <?=$siti==значению из базы?selected:null?>> Город в английском - city. |
Здравствуйте. Есть код меню который нужно чуть подкорректировать. Дело в том, что при нажатии на кнопку 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 , пробовал разные варианты, но все без толку. |
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) { |
без изменений
вот сайт, если захотите посмотреть на работу меню: _http://new.313news.net |
Строка 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). Цитата:
|
Цитата:
Если объекту (меню) определяется некий параметр (тут 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, только управление. |
Почти тоже самое, о чем я писал ранее. При обновлении страницы меню в раскрытом виде стоит слева. После клика на toggle переходит в правцю часть. Еще раз кликаем на toggle и меню заходит за правый край сайта, но не исчезает. Его можно увидеть прокрутив сайт вправо.
Но при клике в другие места оно уже не исчезает. Я вставил Ваш код, можете посмотреть на сайте. |
Это с кодом который я публиковал - https://youtu.be/wiUeL81S6m0
Добавьте вывод в консоль в своем коде параметров меню, будут понятны баги, почему так у вас происходит. |
Даю пояснение к:
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); }); |
Цитата:
Цитата:
|
Цитата:
|
Для просмотра отображения на моб. устройствах не обязателен какой-то сервис, это сейчас могут делать и браузеры в отладчике. Выше видео, это в отладчике Opera. А вот как выглядит в отладчике FF https://youtu.be/Jraq1morMzQ
Таких огрехов как в Opera нет, но это не значит, что их нет вообще. Если оставить строки, о которых я говорил, то на моб. устройствах при смене ориентации (а это и есть изменение размера) меню торчит сбоку сразу. В общем, либо $(window).resize(и тут корректируем, но должным образом), либо, что лучше, через CSS. В этом меню вообще можно многим управлять посредством CSS. |
Кнопку как я говорил выше, можно сразу добавить, а управлять ее видимостью средствами бутстрапа (у вас не нем верстка), определив для каких разрешений она должна быть скрыта. Как это сделать можно прочесть в документации для соответствующей версии.
|
Напишу на 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 с содержимым, а если нужен, то почему по нему нельзя меню показывать. |
Цитата:
|
На css не работает?! Значит вы где-то в чем-то допускаете ошибку.
|
Посмотрел, что на странице удаленной, а не ней уже иное. Я просматривал код сохраненной страницы и все что писал относилось к сохраненному ее состоянию, подключаемых к ней стилей и скриптов. Вы не добавили указанные правила стилей меню в 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> с соответствующими стилями и все. Кроме этого в отладчике можно разобраться и почему эти три кнопки при разных разрешениях могут и убегать за пределы экрана вправо. |
Вложений: 1
Я все добавил, но когда не заработало удалил. Пытался прикрутить другое меню но у него были свои недостатки.
В конечном счете выяснилось, что (не измененный) код прекрасно работает в опере (кажется Вы на нем и смотрели сайт). Но, если удалить код $(window).resize(isMenu); и $(window).resize(Res); то работает и в мозилле. Но в хроме работать никак не хочет. А я все это время его именно в хроме проверял. После удаления кода приведенного выше в хроме при входе на сайт меню в раскрытом виде расположено слева и при клике на кнопку toggle перемещается в правую часть сайта, а при повторном клике на toggle скрывается. Естественно все это я просматриваю с телефона! Итак, в мозилле и опере все работает (сейчас это можно посмотреть на сайте, зайдя с телефона). Причем в опере работает без всяких удалений (т.е. код который я привел в первом сообщении нормально работает в опере). Я впервые вижу, чтобы джава в разных браузерах по разному себя вел. На картинке вид меню в браузере хром. |
Цитата:
Я уже говорил - такое простое мобильное меню вполне может обойтись и без JS. Вот одно из них в виде урока - это одно и тоже меню (причем более чем с двумя уровнями) работающее на большом разрешении как горизонтальное, а на малых как вертикальное. В CSS правилах встречается -moz..., -webkit..., progid:..., это как раз чтобы удовлетворить запросы всего "зоопарка браузеров". |
Цитата:
Сайт тот же: _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 { P.S в шрифте icomoon символ ≡ был очень уродливым, поэтому я оставил вывод с помощью span. |
На айфоне, как и на прочих моб. устройствах экран сенсорный, там иные события. Можете как и с уроком найти готовое меню с поддержкой и моб. устройств. А если охота свое допилить, могу посоветовать jQuery Mobile, что это, вкратце можно узнать в сети.
|
Цитата:
это 4-ое меню, которое я ставлю на сайт. У каждого свои минусы. Я весь сайт сделал быстрее, чем это меню, с которым(и) больше месяца маюсь. |
Цитата:
|
Цитата:
|
Цитата:
Действительно "полноценные" эмуляторы, например, для Андроид, это эмуляторы в Android Studio IDE. Есть подобная среда и для iOS, на все ли платформы она есть и есть ли у нее подобные эмуляторы я сказать не могу. |
Цитата:
|
Цитата:
$(".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"); }); и все работает так, как хотелось. |
Тогда вообще не понять, что там за проблема, и зачем сначала удалять обработчик, затем сразу его же и устанавливать.
|
Цитата:
|
$(".navv li a.parent") .unbind('click') //удаляет ранее установленный обработчик click .bind('click' ... //устанавливает обработчик click Это бессмыслица. У вас отменяет действие по умолчанию (переход) e.preventDefault();, а не unbind. Что касается заменить открытие по наведению, то это у вас работает как раз на css. Ну если считаете, что теперь норма, пусть будет так. |
Цитата:
Сейчас работает как надо. Если в коде есть что-то лишнее или какая-то ошибка, то напишите пожалуйста как будет правильно и я изменю. оригинальный скрипт в этом сообщении. |
Цитата:
$(".navv li a.parent").click(function(e) { e.preventDefault(); //и далее ваш код }) Это и есть чего хотелось. Цитата:
Но мы же не ищем легких путей, так? ;) |
Цитата:
меню построено так: <ul><li></li></ul>, а в Вашем уроке есть лишние команды типа <label> и тд, которые мне некуда вставить. Мне пришлось искать меню имеющие такую структуру (<ul><li></li></ul>). |
Цитата:
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"); }); } |
Цитата:
|
А можно поступить и так, пусть готовится и простая структура, а вот добавление меток и флажков в код меню, это и сделает jQury при загрузке страницы, это все что он нее потребуется.
|
Часовой пояс GMT +3, время: 21:40. |