Mootools Toggleを1ページで複数回使用するには？

質問

下記ページのようなJavaScriptのスライドメニューを
1ページで複数回使用したいです。

http://jsajax.com/CSSVerticalMenuArticle944.aspx

idを使用せずに、classのみにすればよいかと思うのですが、
JavaScriptのどこを修正すればよいのか、わからず困っています。

<a href="#" id="toggle" class="button"><span>Click Here</span></a>
<div style="clear:both">
<ul id="v-menu2" class="v-menu">

おわかりになる方、いらっしゃいましたら
どうぞよろしくお願いいたします。

回答No.3

noname#78238 · ベストアンサー

Mootoolsを使ったことがないので詳しいことは分かりませんが、公式のドキュメントを見る限りFx.Slideにはelementsが渡せないようなので、$eachをつかって反復処理させなければならないと思います。

<a href="#" class="toggle">Click Here</a>
<ul class="v-menu">
<li>item</li>
</ul>
<ul class="v-menu">
<li>item</li>
</ul>
<script type="text/javascript">
var mySlideElements = [];

$each($$('.v-menu'), function(item, index, object) {
mySlideElements.push(new Fx.Slide(item));
mySlideElements[index].hide();
});

$$('.toggle').addEvent('click', function(e) {
e = new Event(e);

$each(mySlideElements, function(item, index, object) {
item.toggle();
e.stop();
});
});
</script>

このような感じでいかがでしょうか。

お礼

早速のお返事ありがとうございます！！
無事解決いたしました。

回答No.2

noname#78238

コードに一部書き忘れがありましたので修正します。

$$('.toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});

補足

<a class="toggle">で動くようになりました。
ありがとうございます！

<ul id="v-menu2" class="v-menu">に関しても、
classのみの使用にすることは可能でしょうか？

var mySlide = new Fx.Slide('v-menu2');
mySlide.hide();
$$('.toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});

度々お手数をおかけいたしますが、
よろしくお願いいたします。

回答No.1

noname#78238

こんにちは。
$$関数は、スタイルシートのセレクタと同じように要素を取得することが出来ますので、$$関数で取得した要素にイベントを設定してあげればいいと思います。

$$('.toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();

参考URL：

http://www.openspc2.org/JavaScript/Ajax/ref/MooTools/ver1.11/