2012-09-07 26 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();