Try this: http://mootools.net/shell/EXuCk/ -- You'll need to adapt this to your own code.
In your add click you are referencing menu array with your incrementor ii, but inside the click event function it has no point of reference. Gafa On Sep 1, 6:26 am, WhyNotSmile <[email protected]> wrote: > 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.
