Question

我的mootools FX.slide工作正常，但我希望内容在开头隐藏，而不是在点击链接后隐藏。我用jquery完成了这个，我通常只是将类更改为display：none;但它与mootools的效果不一样。

如何首先隐藏内容？

这是我所做的一个小提琴：

以下是代码：

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

我一直在寻找相同的东西（即将默认状态设置为“隐藏”），实际上解决方案非常简单，并且已经描述过here：

只需将.hide（）添加到您的行中即可：

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

Answer 3

将HTML代码中的style="display:none"添加到您要访问的元素toggle();

使用Fx.Slide回调创建onComplete：

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

首次展开div之前运行一些代码：

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

myFx.toggle();

隐藏FX.slide内容，而不是点击后

3 个答案: