Данил, вот посмотри пример, может я чего-то не допонимаю, оставил только самое необходимое на странице:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru">
<head>
<title>Site</title>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
$$($('menu1'), $('menu1').getElements('ul')).each(function(el){
accParentItems = el.getChildren().filterByClass('parent');
accTogglers = [];
accElements = [];
accParentItems.each(function(element, index){
accTogglers.push(new Element('span').injectTop(element));
accElements.push(element.getElementsByTagName('ul')[0]);
element.index = index;
element.addEvent('mouseover', function(){
if (this.getChildren().filterByTag('ul')[0].offsetHeight == 0) {
accTimer = this.parentNode.Accordion.display.delay(200, this.parentNode.Accordion, $(this).index);
}
});
element.addEvent('mouseout', function(){
if((accTimer != undefined)){clearTimeout(accTimer)};
});
});
if ( accParentItems.length > 0 ){
el.Accordion = new Accordion(accTogglers, accElements, {
opacity: false,
alwaysHide: true,
show: $$(accParentItems).indexOf($$(accParentItems).filterByClass('active')[0]),
duration: 200,
transition: Fx.Transitions.Quart.easeOut,
onActive: function(toggler, element){
element.parentNode.parentNode.setStyle('height', 'auto');
},
onBackground: function(toggler, element){
element.parentNode.parentNode.setStyle('height', 'auto');
element.setStyle('height', element.offsetHeight+'px');
}
}
);
}
});
if($('menu2')) {
$$('.default').each(function(mrElement, index){
mrElement.parentNode.Accordion.display(mrElement.index);
});
}
});
window.addEvent('domready', function(){
$$($('menu2'), $('menu2').getElements('ul')).each(function(el){
accParentItems = el.getChildren().filterByClass('parent');
accTogglers = [];
accElements = [];
accParentItems.each(function(element, index){
accTogglers.push(new Element('span').injectTop(element));
accElements.push(element.getElementsByTagName('ul')[0]);
element.index = index;
element.addEvent('mouseover', function(){
if (this.getChildren().filterByTag('ul')[0].offsetHeight == 0) {
accTimer = this.parentNode.Accordion.display.delay(250, this.parentNode.Accordion, $(this).index);
}
});
element.addEvent('mouseout', function(){
if (window.accTimer) { clearTimeout(window.accTimer) };
});
});
if ( accParentItems.length > 0 ){
el.Accordion = new Accordion(accTogglers, accElements, {
opacity: false,
alwaysHide: true,
show: $$(accParentItems).indexOf($$(accParentItems).filterByClass('active')[0]),
duration: 250,
transition: Fx.Transitions.Quart.easeOut,
onActive: function(toggler, element){
element.parentNode.parentNode.setStyle('height', 'auto');
element.parentNode.addClass('expanded');
},
onBackground: function(toggler, element){
element.parentNode.parentNode.setStyle('height', 'auto');
element.setStyle('height', element.offsetHeight+'px');
element.parentNode.removeClass('expanded');
}
}
);
}
});
});
</script>
</head>
<body>
<div class="navigation">
<!--MENU1-->
<ul class="menu" id="menu1"><li id="current" class="item1"><span class="active">Main</span></li></ul>
<!--MENU2-->
<ul class="menu" id="menu2">
<li class="parent default">
<a href="/bikes-on-earth">Bykes on earth</a>
<ul>
<li class="parent default">
<a href="/bykes-on-earth/scooter">Scooter</a>
<ul>
<li class=" item6">
<a href="/bikes-on-earth/scooter/honda">Honda</a>
</li>
<li class=" item5">
<a href="/мото-на-земле/скутеры/orion">Orion</a>
</li>
<li class=" item2">
<a href="/мото-на-земле/скутеры/stels">Stels</a>
</li>
</ul>
</li>
<li class="parent">
<a href="/мото-на-земле/мотоциклы">Motobyke</a>
<ul>
<li class=" item7">
<a href="/мото-на-земле/мотоциклы/kawasaki">Kawasaki</a>
</li>
</ul>
</li>
<li>
<a href="/мото-на-земле/квадроциклы">ATVs</a>
</li>
<li>
<a href="/мото-на-земле/мотовездеходы">ATV</a>
</li>
<li>
<a href="/мото-на-земле/багги">Buggy</a>
</li>
<li>
<a href="/мото-на-земле/снегоходы">Snowmobiling</a>
</li>
</ul>
</li>
<li class="parent">
<a href="/мото-на-воде">Beauty on the water</a>
<ul>
<li>
<a href="/мото-на-воде/гидроциклы">Watercraft</a>
</li>
<li>
<a href="/мото-на-воде/катера">Boats1</a>
</li>
<li>
<a href="/мото-на-воде/лодки">Boats2</a>
</li>
<li>
<a href="/мото-на-воде/моторы">Motors</a>
</li>
</ul>
</li>
<li class="parent">
<a href="/дополнительно-к-мото">In addition to motor</a>
<ul>
<li>
<a href="/дополнительно-к-мото/экипировка">Equipment</a>
</li>
<li>
<a href="/дополнительно-к-мото/аксессуары">Accessories</a>
</li>
<li>
<a href="/дополнительно-к-мото/запчасти">Repair parts</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Версия mootools 1.12.
Опишу еще раз вкратце проблему.
На сайте есть несколько window.addEvent('domready'), т.е два меню с типом Accordion. Назовем их условно (menu1 и menu2). Задача состоит в том, чтобы по клику одного из пунктов menu1 разворачивались определенные пункты в menu2.
Конкретные пункты, которые мне необходимо раскрыть в menu2, имеют класс .default. Для разворачивания меню пробую использовать метод display у аккордиона.
Проблема заключается в том, что я не могу получить объект Accordion у пунктов (с классом default, menu2), которые необходимо раскрыть.
FireBug в консоле пишет: "mrElement.parentNode.Accordion is undefined". Возможно получается так, что объекты типа Accordion в menu2 не успевают создаться.
Какие попытки я принимал:
$$('.default').each(function(mrElement, index){
mrElement.parentNode.Accordion.display(mrElement.index);
});
mrElement.parentNode.Accordion - т.е свойства аккордион не существует.
пробовал ставить условие:
if($('menu2')) {
mrElement.parentNode.Accordion.display(mrElement.index);
}
Тоже не выходит.
05.02.2017, 11:44:02