Нужна помощь!
Нужна помощь в реализации выбора города.
Ситуация такая. Есть некая переменная Пхп $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, время: 17:05. |