2012-09-07 29 views
1

我已經準備好了mootools FX.slide,但我希望內容在開始時隱藏,而不是在點擊鏈接後隱藏。我已經完成了這與jquery,我通常只是改變類顯示:無;但它與mootools不一樣。在開始而不是點擊後隱藏FX.slide內容

我該如何開始隱藏內容?

這裏是我做了什麼小提琴:

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; 
} 

回答

2

找到了問題的解決辦法!

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(); 
    }); 
}); 
1

我一直在尋找相同(即設置默認狀態設置爲「隱藏」)和實際的解決方案是非常簡單的,並已描述here

只需添加.hide()到您的線路,像這樣:

var mySlide = new Fx.Slide('slider_content').hide(); 
0
  1. 將HTML代碼中的style="display:none"添加到您要去的元素中toggle();擴大div首次之前

    var myFx = new Fx.Slide('slider_content', { 
        onComplete: function() { 
         if (this.wrapper.offsetHeight != 0) 
         this.wrapper.setStyle('height', 'auto'); 
        } 
    }); 
    
  2. 運行一些代碼:

  3. onComplete回調創建Fx.Slide

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