将 jquery 幻灯片效果转换为 mootools答案

【问题标题】：Convert jquery slide effect to mootools将 jquery 幻灯片效果转换为 mootools
【发布时间】：2008-10-25 00:40:33
【问题描述】：

当人们单击选项卡时，我有一个脚本可以从菜单后面向下滑动一个 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 的答案，或者如果它有类似的变化，我将不胜感激，因为它会在某些时候更新点。

【问题讨论】：

标签： javascript jquery mootools slider

【解决方案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

【讨论】：

【解决方案2】：

这行得通吗？

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

【讨论】：