Перемещение активного пункта меню вверх по классу
Есть огромное меню. Нужно активный родительский пункт меню переместить вверх, чтоб он всегда был первым. Мой код
( 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, а содержит это значение. Спасибо за внимание к моей скромной персоне :) |
Цитата:
<p class='test' id='Ok'>Test</p>
<script>
alert(document.querySelector('.test').id);
</script>
|
Цитата:
<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>
|
Ленча,
может классов нет(или ещё нет), на макете всё работает
<!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>
|
Возможно, проблема в том, что 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>
|
Dilettante_Pro, Вашу правку буду использовать обязательно, потому что вероятность наличия нескольких таких модулей на странице велика. Но, как и сказал рони, классов действительно на странице, к моменту обработки скриптом, нет. Ибо код, любезно предоставленный ksa,
<script type="text/javascript">
alert(document.querySelector('li.level1.open').id);
</script>
не выдает алерта. Это мне не понятно, ибо же ready используем( |
Цитата:
|
Ленча,
Цитата:
Или вы хотели parentNode.id? |
У 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); - моя вставка. |
Ленча,
найдите строку accordeonmenuck в ваших файлах и после неё добавьте код а не в плагин. после вызова плагина!!! |
| Часовой пояс GMT +3, время: 01:10. |