Question

尝试在MooTools中添加幻灯片效果。

所需功能：点击div.head中的链接可在其下方切换div。

HTML：

<div class="head"><a id="v_toggle" href="#">Number One</a></div>
<div id="main">Blah blah blah...</div>
<div class="head"><a id="v_toggle" href="#">Number Two</a></div>
<div id="main">Blah blah blah...</div>
<div class="head"><a id="v_toggle" href="#">Number Three</a></div>
<div id="main">Blah blah blah...</div>

JS：

window.addEvent('domready', function() {
    var myVerticalSlide = new Fx.Slide('main');
    $('v_toggle').addEvent('click', function(event){
        event.stop();
        myVerticalSlide.toggle();
    });
});

的问题：

首先，没有滑动： - （
一个页面中具有相同ID的多个元素（#v_toggle，#main） - ＆gt;试图制作两个ID类，也没有工作（没有滑动）

小提琴：http://jsfiddle.net/S6KtS/

Answer 1

Fx.Slide适用于个别元素，而非家庭。除了你不能有多个ID，它会破坏你的代码，它是无效的HTML。

试试这个：

<强> Mootools的

window.addEvent('domready', function () {
    var status = [];
    var divsMain = $$('div.main');

    var toggleDivs = function(i){
        return function(){
            var nextMain = this.getParent().getNext('.main'); 
            var doIt = status[i] ? nextMain.dissolve() : nextMain.reveal();
            status[i] = !status[i];
            return false;
        }
    }
    $$('.v_toggle').each(function(el,i){
        el.addEvent('click', toggleDivs(i));
        status[i] = true;
    });
});

<强> HTML

<div class="head"><a class="v_toggle" href="#">Number One</a>

</div>
<div class="main">This is a lot of text in this container. I want to slide it in and out. This is an experiment with MooTools. his is a lot of text in this container. I want to slide it in and out. This is an experiment with MooTools. his is a lot of text in this container. I want to slide it in and out. This is an experiment with MooTools.</div>
<div class="head"><a class="v_toggle" href="#">Number Two</a>

</div>
<div class="main">This is a lot of text in this container. I want to slide it in and out. This is an experiment with MooTools. his is a lot of text in this container. I want to slide it in and out. This is an experiment with MooTools. his is a lot of text in this container. I want to slide it in and out. This is an experiment with MooTools.</div>
<div class="head"><a class="v_toggle" href="#">Number Three</a>

</div>
<div class="main">This is a lot of text in this container. I want to slide it in and out. This is an experiment with MooTools. his is a lot of text in this container. I want to slide it in and out. This is an experiment with MooTools. his is a lot of text in this container. I want to slide it in and out. This is an experiment with MooTools.</div>

Fiddle

Answer 2

为我的问题找到了解决方案：

HTML：

<div class="container">
    <div class="head">Number One</div>
    <div class="main">Blah blah blah...</div>
</div>
<div class="container">
    <div class="head">Number Two</div>
    <div class="main">Blah blah blah...</div>
</div>
<div class="container">
    <div class="head">Number Three</div>
    <div class="main">Blah blah blah...</div>
</div>

JS：

window.addEvent( 'domready', function(){
    $$( '.container' ).each(function(item){
        var thisSlider = new Fx.Slide( item.getElement( '.main' ), { duration: 500 } );
        thisSlider.hide();
        item.getElement( '.head' ).addEvent( 'click', function(){ thisSlider.toggle(); } );
    } );
} );

小提琴：http://jsfiddle.net/S6KtS/3/

MooTools Fx.Slide在一个页面上容纳几个容器

2 个答案:

Fiddle