將jQuery幻燈片效果轉換為mootools

Question

當人們單擊選項卡時，我有一個腳本可以從菜單后面向下滑動div。 然而，它在jQuery中，我想使用mootools（很多原因我不會在這里介紹）。 但是目前我還停留在mootools 1.1上。 但是由於某種原因，我的嘗試不起作用:(

HTML

print("code sample");
   <div id="panel">
    <form action="">
           < form here > 
    </form>
</div>
<div class="slide">
  <p class="sl"><a href="#" class="btn-slide" id="toggle"><span></span></a></p>

Div id面板包含向下滑動的表單，div類幻燈片，並且P標簽由通過CSS懸掛的選項卡/按鈕替換，單擊此按鈕可使選項卡向下滑動。

jQuery（工作正常）

print("code sample");
  <script type="text/javascript">
  $j(document).ready(function(){
$j(".btn-slide").click(function(){
    $j("#panel").slideToggle("slow");
    $j(this).toggleClass("active"); return false;
});

  });
  </script>

我的噓聲嘗試

print("code sample");
 <script type="text/javascript">
window.addEvent('domready', function(){
 var mySlide = new Fx.Slide('panel');
    $('toggle').addEvent('click', function(e){
        e = new Event(e);
        mySlide.toggle();
        e.stop();
    });
});
 </script>

就像我在上面說的那樣，我目前僅限於moo 1.1，但是如果有一個適用於1.1和1.2的答案，或者如果它具有類似的更改，我將不勝感激，因為它將在某個時候進行更新。

Answer 1

這應該在1.11和1.2中都有效：

window.addEvent('domready', function() {
    var mySlide = new Fx.Slide('panel');
    $('toggle').addEvent('click', function(e) {
        e = new Event(e); // this isn't needed in 1.2
        e.stop();
        mySlide.toggle();
        this.toggleClass('active');
    });
});

但是，在MooTools 1.2和更高版本中，Fx.Slide不包含在核心中–您必須將其作為MooTools More的一部分進行下載。

一個有效的演示： http : //jsbin.com/ewasa

Answer 2

這樣行嗎？

function toggleSlide(){
    var theSlider = new Fx.Slide('slide');
    $('theSlide').addEvent('click', function(e){
        e = new Event(e);
        theSlider.toggle();
        e.stop();
    });
}