Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.11.2017, 16:29
Аспирант
Отправить личное сообщение для Ленча Посмотреть профиль Найти все сообщения от Ленча
 
Регистрация: 13.07.2014
Сообщений: 78

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

( function($) {
        $(document).ready(function(){
            $(function (){
                $('li.level1.open').prependTo('ul.menu');
            });
        });
    } ) ( jQuery );


не работает.

Если же подставить идентификаторы объектов, к примеру

( function($) {
        $(document).ready(function(){
            $(function (){
                $('#item-192').prependTo('#accorderon927');
            });
        });
    } ) ( jQuery );


работать будет. Все перемещается как и задумывалось. Но.

Во-первых, заранее неизвестно какой будет ид у активного пункта меню.
Во-вторых, неизвестен идентификатор ul - их на странице может быть несколько. Тогда, кстати, с моим кодом тоже начнется чехарда.

Посему пара вопросов.
1) Как, зная класс элемента, определить его Id
2) Как определить id родительского ul для li с классом open.level1

В классах помимо этих значений могут присутствовать еще какие-то, то есть класс не является .level1.open, а содержит это значение.

Спасибо за внимание к моей скромной персоне
Ответить с цитированием
  #2 (permalink)  
Старый 15.11.2017, 16:59
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Ленча
Как, зная класс элемента, определить его Id
<p class='test' id='Ok'>Test</p>
<script>
alert(document.querySelector('.test').id);
</script>
Ответить с цитированием
  #3 (permalink)  
Старый 15.11.2017, 17:01
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Ленча
Как определить id родительского ul для li с классом open.level1
<ul id='Ok'>
   <li>Item 0</li>
   <li class='open'>Item 1</li>
   <li>Item 2</li>
</ul>
<script>
alert(document.querySelector('.open').parentNode.id);
</script>
Ответить с цитированием
  #4 (permalink)  
Старый 15.11.2017, 17:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Ленча,
может классов нет(или ещё нет), на макете всё работает
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
( function($) {
        $(document).ready(function(){
            $(function (){
                $('li.level1.open').prependTo('ul.menu');
            });
        });
    } ) ( jQuery );

  </script>
</head>

<body>
<ul  class="menu">
  <li>Item 0</li>
  <li class='level1 open'>Item 1</li>
  <li>Item 2</li>
</ul>

</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 15.11.2017, 17:37
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Возможно, проблема в том, что ul с классом menu не один?
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
( function($) {
        $(document).ready(function(){
            $(function (){
                var act = $('li.level1.open');
                act.prependTo(act.parent());
            });
        });
    } ) ( jQuery );

  </script>
</head>

<body>
<ul  class="menu">
  <li>Item 00</li>
  <li >Item 01</li>
  <li>Item 02</li>
</ul>
<ul   class="menu">
  <li>Item 0</li>
  <li class='level1 open'>Item 1</li>
  <li>Item 2</li>
</ul>

</body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 15.11.2017, 17:58
Аспирант
Отправить личное сообщение для Ленча Посмотреть профиль Найти все сообщения от Ленча
 
Регистрация: 13.07.2014
Сообщений: 78

Dilettante_Pro, Вашу правку буду использовать обязательно, потому что вероятность наличия нескольких таких модулей на странице велика. Но, как и сказал рони, классов действительно на странице, к моменту обработки скриптом, нет. Ибо код, любезно предоставленный ksa,

<script type="text/javascript">
    alert(document.querySelector('li.level1.open').id);
</script>



не выдает алерта. Это мне не понятно, ибо же ready используем(
Ответить с цитированием
  #7 (permalink)  
Старый 15.11.2017, 18:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Ленча
ибо же ready используем(
значит есть либо load или ajax туда и надо ставить ваш код
Ответить с цитированием
  #8 (permalink)  
Старый 15.11.2017, 18:07
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Ленча,
Сообщение от Ленча
Ибо код, любезно предоставленный ksa,

<script type="text/javascript">
    alert(document.querySelector('li.level1.op en').id);
</script>



не выдает алерта.
А у вас у li есть id?
Или вы хотели parentNode.id?
Ответить с цитированием
  #9 (permalink)  
Старый 15.11.2017, 18:47
Аспирант
Отправить личное сообщение для Ленча Посмотреть профиль Найти все сообщения от Ленча
 
Регистрация: 13.07.2014
Сообщений: 78

У li точно есть id - прописывается с помощью php в процессе формирования меню.

А вот ни load ни ajax я, к сожалению, не нашла. Попробовала вставить эту фиговинку прямо в скрипт меню, но оно, увы, не заработало. Вот скрипт меню полностью

(function($) {

	//define the defaults for the plugin and how to call it
	$.fn.accordeonmenuck = function(options) {
		//set default options
		var defaults = {
			eventtype: 'click',
			fadetransition: false, // pas encore implemente
			transition: 'linear',
			duree: 500,
			imageplus: 'modules/mod_accordeonck/assets/plus.png',
			imageminus: 'modules/mod_accordeonck/assets/minus.png',
			// menuID : 'accordeonck',
			defaultopenedid: '0',
			showactive: true,
			activeeffect: true
		};

		//call in the default otions
		var opts = $.extend(defaults, options);
		var menu = this;

		//act upon the element that is passed into the design
		return menu.each(function(options) {

			var fxtransition = defaults.fxtransition;
			accordeonmenuInit();

			function accordeonmenuInit() {
				$(".parent.active.separator > a").addClass('test');
				$(".parent > ul", menu).hide();
				if (opts.showactive && !opts.activeeffect) {
					$(".parent.active > ul", menu).show().parent().addClass("open");
					$(".parent.active > img.toggler", menu).attr('src', opts.imageminus);
				} else if (opts.showactive && opts.activeeffect) {
					togglemenu($(".parent.active > .toggler, .parent.active.separator > a", menu));
				}
				if (opts.defaultopenedid && !$(".active.parent", menu).length) {
					$(".item-"+opts.defaultopenedid+" > ul", menu).show().parent().addClass("open");
					$(".item-"+opts.defaultopenedid+" > img.toggler", menu).attr('src', opts.imageminus);
				}
				if (opts.eventtype == 'click') {
					$("li.parent > .toggler, li.parent.separator > a", menu).click(function() {
						togglemenu($(this));
					});
				} else {
					$("li.parent > .toggler", menu).mouseenter(function() {
						togglemenu($(this));
					});

				}
				
				var ac_ch = $('.accordeonck li.active:not(.level1)');
				if (ac_ch.length) {
					var ac_pr = ac_ch.parent().parent('li.parent');
					while(ac_pr.length) { 
						$('> ul', ac_pr).slideDown({
							duration: opts.duree,
							easing: opts.transition,
							complete: function() {
								$(this).parent().addClass('open');
								if ($('> img', $(this).parent()).length) {
									$('> img', $(this).parent()).attr('src', opts.imageminus);
								}
							}
						});
						
						ac_pr = ac_pr.parent().parent('li.parent:not(.level1)');
					}
				}
			}

			function togglemenu(link) {
				ck_content = link.parent();
				if (!link.parent().hasClass("open")) {
					$(".parent > ul", ck_content.parent()).slideUp({
						duration: opts.duree,
						easing: opts.transition,
						complete: function() {
							$(".parent", ck_content.parent()).removeClass("open");
							$(".parent > img.toggler", ck_content.parent()).attr('src', opts.imageplus);
							if (link.get(0).tagName.toLowerCase() == 'img')
								link.attr('src', opts.imageplus);
							if (link.get(0).tagName.toLowerCase() == 'a')
								$("> img.toggler", link.parent()).attr('src', opts.imageplus);
						}
					});
					link.nextAll("ul").slideDown({
						duration: opts.duree,
						easing: opts.transition,
						complete: function() {
							link.parent().addClass("open");
							if (link.get(0).tagName.toLowerCase() == 'img')
								link.attr('src', opts.imageminus);
							if (link.get(0).tagName.toLowerCase() == 'a')
								$("> img.toggler", link.parent()).attr('src', opts.imageminus);
						}
					});
				} else {
					link.nextAll("ul").slideUp({
						duration: opts.duree,
						easing: opts.transition,
						complete: function() {
							link.parent().removeClass("open");
							if (link.get(0).tagName.toLowerCase() == 'img')
								link.attr('src', opts.imageplus);
							if (link.get(0).tagName.toLowerCase() == 'a')
								$("> img.toggler", link.parent()).attr('src', opts.imageplus);
						}
					});
				}
			}
		});
	};
		$(function (){
                var act = $('li.level1.open');
				act.prependTo(act.parent());
            });
})(jQuery);


в самом низу, перед закрывающим })(jQuery); - моя вставка.

Последний раз редактировалось Ленча, 15.11.2017 в 18:49.
Ответить с цитированием
  #10 (permalink)  
Старый 15.11.2017, 18:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Ленча,
найдите строку accordeonmenuck в ваших файлах и после неё добавьте код а не в плагин.
после вызова плагина!!!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выделение активного пункта меню sergofedor06 jQuery 15 23.11.2015 12:15
Замена стилей класса Павел Турченко Элементы интерфейса 9 30.10.2015 15:24
Бесконечноуровневое меню на CSS ruslan_mart Ваши сайты и скрипты 5 12.01.2015 20:59
Выделение активного пункта меню при ajax запросе faecker AJAX и COMET 6 04.09.2014 19:14
анимация активного пункта меню rustleofstars Элементы интерфейса 0 27.04.2013 17:56