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, а содержит это значение.
Спасибо за внимание к моей скромной персоне 
|
|
15.11.2017, 16:59
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,215
|
|
|
Сообщение от Ленча
|
|
Как, зная класс элемента, определить его Id
|
<p class='test' id='Ok'>Test</p>
<script>
alert(document.querySelector('.test').id);
</script>
|
|
15.11.2017, 17:01
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,215
|
|
|
Сообщение от Ленча
|
|
Как определить 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>
|
|
15.11.2017, 17:19
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Ленча,
может классов нет(или ещё нет), на макете всё работает
<!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>
|
|
15.11.2017, 17:37
|
|
Профессор
|
|
Регистрация: 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>
|
|
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 используем(
|
|
15.11.2017, 18:01
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Сообщение от Ленча
|
|
ибо же ready используем(
|
значит есть либо load или ajax туда и надо ставить ваш код |
|
15.11.2017, 18:07
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
Ленча,
|
Сообщение от Ленча
|
Ибо код, любезно предоставленный ksa,
<script type="text/javascript">
alert(document.querySelector('li.level1.op en').id);
</script>
не выдает алерта.
|
А у вас у li есть id?
Или вы хотели parentNode.id?
|
|
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.
|
|
15.11.2017, 18:58
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Ленча,
найдите строку accordeonmenuck в ваших файлах и после неё добавьте код а не в плагин.
после вызова плагина!!!
|
|
|
|
