Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.04.2019, 14:58
Интересующийся
Отправить личное сообщение для begovik Посмотреть профиль Найти все сообщения от begovik
 
Регистрация: 09.02.2019
Сообщений: 22

Аккордеон. Как сделать, чтобы стрелка не закрывалась
Здравствуйте! Скачал скрипт меню аккордеона и решил к пунктам, у которых есть дочерние элементы добавить стрелку,
которая указывает вправо, когда меню закрыто и вниз, когда открыто.
Добавил пару строчек и стрелка заработала, но проблема в том,
что когда кликаешь по дочернему элементу активного пункта, то стрелка закрывается (устанавливается вправо)
и я никак не разберусь где это изменить, помогите пожалуйста.
Строки, которые я уже добавил начинаются с комментариев:
// Следующие две строки управляют стрелкой
// !Требуют подключения "Font Awesome"
(function($){
	$.fn.dcAccordion = function(options) {
		//set default options 
		var defaults = {
			classParent	 : 'dcjq-parent',
			classActive	 : 'active',
			classArrow	 : 'dcjq-icon',
			arrowRight	 : 'fa-angle-right',
			arrowDown	 : 'fa-angle-down',
			classCount	 : 'dcjq-count',
			classExpand	 : 'dcjq-current-parent',
			eventType	 : 'click',
			hoverDelay	 : 300,
			menuClose    : true,
			autoClose    : true,
			autoExpand	 : false,
			speed        : 100,
			saveState	 : true,
			disableLink	 : true,			
			showCount 	 : false,
			cookie		 : 'dcjq-accordion'
		};
		//call in the default otions
		var options = $.extend(defaults, options);
		this.each(function(options){
			var obj = this;
			setUpAccordion();
			if(defaults.saveState == true){
				checkCookie(defaults.cookie, obj);
			}
			if(defaults.autoExpand == true){
				$('li.'+defaults.classExpand+' > a').addClass(defaults.classActive);
			}
			resetAccordion();
			if(defaults.eventType == 'hover'){
				var config = {
					sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
					interval: defaults.hoverDelay, // number = milliseconds for onMouseOver polling interval
					over: linkOver, // function = onMouseOver callback (REQUIRED)
					timeout: defaults.hoverDelay, // number = milliseconds delay before onMouseOut
					out: linkOut // function = onMouseOut callback (REQUIRED)
				};
				$('li a',obj).hoverIntent(config);
				var configMenu = {
					sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
					interval: 1000, // number = milliseconds for onMouseOver polling interval
					over: menuOver, // function = onMouseOver callback (REQUIRED)
					timeout: 1000, // number = milliseconds delay before onMouseOut
					out: menuOut // function = onMouseOut callback (REQUIRED)
				};
				$(obj).hoverIntent(configMenu);
				// Disable parent links
				if(defaults.disableLink == true){
					$('li a',obj).click(function(e){
						if($(this).siblings('ul').length >0){
							e.preventDefault();
						}
					});
				}
			} else {			
				$('li a',obj).click(function(e){
					$activeLi = $(this).parent('li');
					$parentsLi = $activeLi.parents('li');
					$parentsUl = $activeLi.parents('ul');
					// Prevent browsing to link if has child links
					if(defaults.disableLink == true){
						if($(this).siblings('ul').length >0){
							e.preventDefault();
						}
					}
					// Auto close sibling menus
					if(defaults.autoClose == true){
						autoCloseAccordion($parentsLi, $parentsUl);
					}
					if ($('> ul',$activeLi).is(':visible')){
						$('ul',$activeLi).slideUp(defaults.speed);
						$('a',$activeLi).removeClass(defaults.classActive);
						// Следующие две строки управляют стрелкой
						// !Требуют подключения "Font Awesome"
						$('> a i',$activeLi).removeClass(defaults.arrowDown);
						$('> a i',$activeLi).addClass(defaults.arrowRight);
					} else {
						$(this).siblings('ul').slideToggle(defaults.speed);
						$('> a',$activeLi).addClass(defaults.classActive);
						// Следующие две строки управляют стрелкой
						// !Требуют подключения "Font Awesome"
						$('> a i',$activeLi).removeClass(defaults.arrowRight);
						$('> a i',$activeLi).addClass(defaults.arrowDown);
					}					
					// Write cookie if save state is on
					if(defaults.saveState == true){
						createCookie(defaults.cookie, obj);
					}
				});
			}
			// Set up accordion
			function setUpAccordion(){
				$arrow = '<span class="'+defaults.classArrow+'"></span>';
				var classParentLi = defaults.classParent+'-li';
				$('> ul',obj).show();
				$('li',obj).each(function(){
					if($('> ul',this).length > 0){
						$(this).addClass(classParentLi);
						$('> a',this).addClass(defaults.classParent).append($arrow);
					}
				});
				$('> ul',obj).hide();
				if(defaults.showCount == true){
					$('li.'+classParentLi,obj).each(function(){
						if(defaults.disableLink == true){
							var getCount = parseInt($('ul a:not(.'+defaults.classParent+')',this).length);
						} else {
							var getCount = parseInt($('ul a',this).length);
						}
						$('> a',this).append(' <span class="'+defaults.classCount+'">('+getCount+')</span>');
					});
				}
			}
			
			function linkOver(){

			$activeLi = $(this).parent('li');
			$parentsLi = $activeLi.parents('li');
			$parentsUl = $activeLi.parents('ul');

			// Auto close sibling menus
			if(defaults.autoClose == true){
				autoCloseAccordion($parentsLi, $parentsUl);

			}

			if ($('> ul',$activeLi).is(':visible')){
				$('ul',$activeLi).slideUp(defaults.speed);
				$('a',$activeLi).removeClass(defaults.classActive);
			} else {
				$(this).siblings('ul').slideToggle(defaults.speed);
				$('> a',$activeLi).addClass(defaults.classActive);
			}

			// Write cookie if save state is on
			if(defaults.saveState == true){
				createCookie(defaults.cookie, obj);
			}
		}

		function linkOut(){
		}

		function menuOver(){
		}

		function menuOut(){

			if(defaults.menuClose == true){
				$('ul',obj).slideUp(defaults.speed);
				// Reset active links
				$('a',obj).removeClass(defaults.classActive);
				createCookie(defaults.cookie, obj);
			}
		}

		// Auto-Close Open Menu Items
		function autoCloseAccordion($parentsLi, $parentsUl){
			$('ul',obj).not($parentsUl).slideUp(defaults.speed);
				// Следующие две строки управляют стрелкой
				// !Требуют подключения "Font Awesome"
				$('a i',obj).removeClass(defaults.arrowDown);
				$('a i',obj).addClass(defaults.arrowRight);
			// Reset active links
			$('a',obj).removeClass(defaults.classActive);
				
			$('> a',$parentsLi).addClass(defaults.classActive);
		}
		// Reset accordion using active links
		function resetAccordion(){
			$('ul',obj).hide();
			$allActiveLi = $('a.'+defaults.classActive,obj);
			$allActiveLi.siblings('ul').show();
		}
		});
		// Retrieve cookie value and set active items
		function checkCookie(cookieId, obj){
			if($.cookie(cookieId)) var cookieVal = $.cookie(cookieId); // добавил условие

			if(cookieVal != null){
				// create array from cookie string
				var activeArray = cookieVal.split(',');
				$.each(activeArray, function(index,value){
					var $cookieLi = $('li:eq('+value+')',obj);
					$('> a',$cookieLi).addClass(defaults.classActive);
					$('a i',$cookieLi).removeClass(defaults.arrowRight);
					$('a i',$cookieLi).addClass(defaults.arrowDown);
					var $parentsLi = $cookieLi.parents('li');
					$('> a',$parentsLi).addClass(defaults.classActive);
				});
			}
		}
		// Write cookie
		function createCookie(cookieId, obj){
			var activeIndex = [];
			// Create array of active items index value
			$('li a.'+defaults.classActive,obj).each(function(i){
				var $arrayItem = $(this).parent('li');
				var itemIndex = $('li',obj).index($arrayItem);
					activeIndex.push(itemIndex);
				});
			// Store in cookie
			$.cookie(cookieId, activeIndex, { path: '/' });
		}
	};
})(jQuery);
Ответить с цитированием
  #2 (permalink)  
Старый 06.04.2019, 19:14
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Как, где Font Awesome? Я только вижу, что это Font Awful! И действительно, это не шрифт, а одна криптография(да ещё предлагают <i> для засорения DOM)! И ещё, пока вы не отыщете этот шрифт велосипедистов, (совершенно непонятно, зачем там изобретают уже существующие кодовые точки!) вы не поймёте, что же символ там! Для своей цели вы можете использовать символ ▶, и уже для этого символа использовать необходимый шрифт с нужным начертанием символа!

Я не понял, зачем вам надо, чтобы подменю открылось и тут же закрылось? Может всё-таки делегирование?

И зачем вам инициализировать меню каждый раз, как только найден новый пункт меню?

Я только поправил, чтобы правильно открывалось/закрывалось меню, и стрелку...

https://codepen.io/Malleys/pen/dLXgNW?editors=1010
Ответить с цитированием
  #3 (permalink)  
Старый 06.04.2019, 23:42
Интересующийся
Отправить личное сообщение для begovik Посмотреть профиль Найти все сообщения от begovik
 
Регистрация: 09.02.2019
Сообщений: 22

Спасибо Профессор, так и выглядит и работает лучше)!

С тегами <i> это я задумал, чтобы при смене класса менялось и направление стрелки,
я плохо разбираюсь в js, и этот способ мне показался самым простым.
Я только не понял, что вы изменили, что выходит, что при добавлении класса active к пункту меню срабатывает css анимация?
Но как тогда скрипт вообще понимает, какому пункту добавить стрелку?

Цитата:
Я не понял, зачем вам надо, чтобы подменю открылось и тут же закрылось? Может всё-таки делегирование?
Нет, само подменю не закрывалось, при клике на подменю только стрелка меняла направление на "вправо".

Цитата:
И зачем вам инициализировать меню каждый раз, как только найден новый пункт меню?
Не совсем понял о чём вы, но если о cookie, то это для того, чтобы после перезагрузки страницы, меню запоминало своё положение.

Укажите на строки, в которых вы делали изменения, я хочу всё-же разобраться как работает этот скрипт.

И ещё побочный вопрос про стрелку: в @font-face эта длинная строка содержит само начертание стрелки, чтоб она была угловой? Я просто первый раз вижу такой способ, вот эту часть я не понимаю data:application/

Последний раз редактировалось begovik, 06.04.2019 в 23:56.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать чтобы кнопка «Назад» работала бы в пределах определенного сайта? Askeer Общие вопросы Javascript 0 12.10.2016 18:58
Как сделать, чтобы при вводе числа в поле добавлялись разделители групп разрядов? Hurray Элементы интерфейса 13 18.02.2015 14:07
как сделать чтобы в popup окне показывалось картинка? sarik Общие вопросы Javascript 31 15.03.2013 13:12
как сделать так чтобы в popup окне принимался css стили,? sarik Общие вопросы Javascript 2 12.03.2013 10:24
КАК сделать чтобы кнопка PRINT не отображалась при печати?:?? xxxxx82 Элементы интерфейса 1 19.04.2011 14:58