Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.05.2020, 18:06
Интересующийся
Отправить личное сообщение для surin.89 Посмотреть профиль Найти все сообщения от surin.89
 
Регистрация: 22.05.2020
Сообщений: 12

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

});
Ответить с цитированием
  #2 (permalink)  
Старый 31.05.2020, 22:03
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,290

Город - City

Почему не прокинуть в представление (view) значение вашей переменной и сразу же на сервере не добавить нужному блоку нужный класс?
Ответить с цитированием
  #3 (permalink)  
Старый 01.06.2020, 02:07
Интересующийся
Отправить личное сообщение для surin.89 Посмотреть профиль Найти все сообщения от surin.89
 
Регистрация: 22.05.2020
Сообщений: 12

Нужно чтобы список открывался только тогда, когда переменная равна нулю. Я не понял ваш вариант.
Ответить с цитированием
  #4 (permalink)  
Старый 01.06.2020, 06:32
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,648

Сообщение от surin.89
если $siti = 0, тогда .list-siti.active
А если нет, что это означает? Данные для списка берутся из базы, это значит список строится циклом, значит в выводе:

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

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


Город в английском - city.
Ответить с цитированием
  #5 (permalink)  
Старый 10.06.2020, 01:20
Интересующийся
Отправить личное сообщение для zulfukar Посмотреть профиль Найти все сообщения от zulfukar
 
Регистрация: 10.06.2020
Сообщений: 29

Здравствуйте. Есть код меню который нужно чуть подкорректировать. Дело в том, что при нажатии на кнопку 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 , пробовал разные варианты, но все без толку.
Ответить с цитированием
  #6 (permalink)  
Старый 10.06.2020, 13:01
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,290

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) {
Ответить с цитированием
  #7 (permalink)  
Старый 10.06.2020, 14:37
Интересующийся
Отправить личное сообщение для zulfukar Посмотреть профиль Найти все сообщения от zulfukar
 
Регистрация: 10.06.2020
Сообщений: 29

без изменений
вот сайт, если захотите посмотреть на работу меню: _http://new.313news.net
Ответить с цитированием
  #8 (permalink)  
Старый 10.06.2020, 16:54
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,648

Строка 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);


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

Последний раз редактировалось laimas, 10.06.2020 в 17:35.
Ответить с цитированием
  #9 (permalink)  
Старый 10.06.2020, 19:20
Интересующийся
Отправить личное сообщение для zulfukar Посмотреть профиль Найти все сообщения от zulfukar
 
Регистрация: 10.06.2020
Сообщений: 29

Сообщение от laimas Посмотреть сообщение
Строка 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).
Цитата:
Что касаемо пропадания меню, вы хотите чтобы на моб. устройствах щелчок вне меню не скрывал его?
именно.

Последний раз редактировалось zulfukar, 10.06.2020 в 19:31.
Ответить с цитированием
  #10 (permalink)  
Старый 10.06.2020, 19:49
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,648

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

Последний раз редактировалось laimas, 10.06.2020 в 20:22.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужна помощь яваскриптеров espltd Элементы интерфейса 2 03.03.2017 09:38
Нужна помощь по javascript darklend Общие вопросы Javascript 0 12.01.2014 21:33
Нужна помощь: Slider wheel Alex555 Мобильный JavaScript 0 15.05.2013 17:06
Нужна помощь по слайдеру seoguru Работа 3 28.01.2013 20:02
нужна помощь dominosoko Серверные языки и технологии 4 14.03.2010 01:17