隱藏FX.slide內容，而不是點擊后

Question

我的mootools FX.slide工作正常，但我希望內容在開頭隱藏，而不是在他們點擊鏈接后。 我用jquery完成了這個，我通常只是將類更改為display：none; 但它與mootools的功能不同。

我如何首先隱藏內容？

這是我所做的一個小提琴：

http://jsfiddle.net/ajrdesign/seVM7/

這是代碼：

JS

var mySlide = new Fx.Slide('slider_content');

$('toggle').addEvent('click', function(e){
   mySlide.toggle();
});

HTML

<li>
    <h3>What can I do with Revu iPad?</h3>
    <a id="toggle" href="#">Answer</a>
    <div id="slider_content">
        <p>Revu iPad includes some of the most popular features of Bluebeam Revu, enabling you to redline PDFs and collaborate with others on the go. Access PDFs through Dropbox, Box,  iTunes, or WebDAV and redline PDFs with markup tools* including your existing tool sets. Additionally, collaborate with project partners across the globe in real time using Bluebeam Studio. </p>
        <p>Revu iPad does not include all the features of Bluebeam Revu. Our app is designed to provide users with the features they need to document issues and collaborate in the field, without compromising speed.</p>
        <p>*Measurement annotations are currently not supported.</p>
    </div>
</li>

CSS

#slider_content {
    padding: 10px;
    margin: 20px;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
}

Answer 1

找到了解決問題的方法！

http://jsfiddle.net/ajrdesign/seVM7/1/

基本上添加了一點domready事件：

var mySlide = new Fx.Slide('slider_content');
document.addEvent("domready", function() { 
   $('slider_content').slide('hide'); 
   $('toggle').addEvent('click', function(e) { 
      e.stop(); 
      mySlide.toggle(); 
   }); 
});

Answer 2

我正在尋找相同的（即將默認狀態設置為“隱藏”），實際上解決方案非常簡單，並在此處進行了描述：

只需將.hide（）添加到您的行中，如下所示：

var mySlide = new Fx.Slide('slider_content').hide();

Answer 3

1. 在HTML代碼中將style="display:none"添加到您要toggle()的元素toggle() ;

2. 使用onComplete回調創建Fx.Slide ：

    var myFx = new Fx.Slide('slider_content', { onComplete: function() { if (this.wrapper.offsetHeight != 0) this.wrapper.setStyle('height', 'auto'); } }); 

3. 在第一次擴展div之前運行一些代碼：

    var e = $('slider_content'); if ( e.getStyle('display') != 'block' ) { myFx.hide(); e.setStyle('display', 'block'); } myFx.toggle();