[英]MooTools Fx.Slide for several containers on one page
嘗試在MooTools中添加幻燈片效果。
所需功能:單擊div
中的鏈接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();
});
});
問題:
#v_toggle
, #main
)->試圖制作兩個ID類,但都不起作用(不滑動) 小提琴: http : //jsfiddle.net/S6KtS/
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>
找到了我的問題的解決方案:
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/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.