Hi everyone, I'm new to mootools, and have got stuck trying to use
Fx.slide.
In my navigation, there are about 10 items or so. 3 of them have
submenus, and I am trying to implement slide so that when the top
level item is clicked, the corresponding submenu slides down.
I can achieve this by explicitly applying it to each of them, like
this:
window.addEvent('domready', function(){
var foodMenu= new Fx.Slide('subsectionlist_thefood');
var wineMenu= new Fx.Slide('subsectionlist_thewine');
var galleryMenu= new Fx.Slide('subsectionlist_gallery');
foodMenu.hide();
wineMenu.hide();
galleryMenu.hide();
$('menu_thefood').addEvent('click', function(e){
e = new Event(e);
foodMenu.toggle();
e.stop();
})
$('menu_thewine').addEvent('click', function(e){
e = new Event(e);
wineMenu.toggle();
e.stop();
});
$('menu_gallery').addEvent('click', function(e){
e = new Event(e);
galleryMenu.toggle();
e.stop();
});
});
This works fine and looks good.
However, I'd like to be able to automate this, so that I don't have to
explicitly set each one. This would mean that I could add new
submenus without having to add the code in here each time.
I tried doing it like this:
window.addEvent('domready', function(){
// Get all links which have sublinks
var listList = document.getElementsByTagName('ul');
var sectionList = new Array();
for(var ii=0; ii< listList.length; ii++) {
if(listList[ii].className == 'subsection') {
sectionList.push(listList[ii]);
}
}
// Make sublinks into slides
var menu = new Array();
for(ii=0; ii<sectionList.length; ii++) {
menu[ii] = new Fx.Slide(sectionList[ii].id);
menu[ii].hide();
$('menu_' +
sectionList[ii].id.replace('subsectionlist_','')).addEvent('click',
function(e){
e = new Event(e);
menu[ii].toggle();
e.stop();
})
}
})
This hides them all ok, but they don't show when the top level item is
clicked. I tried putting an alert into the toggle function in
mootools, and it appears that toggle is not being triggered. What am
I doing wrong?
Thank you.
