1

我的 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;
}
4

3 回答 3

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(); 
   }); 
});
于 2012-09-07T23:03:20.667 回答
1

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

只需将 .hide() 添加到您的行中，如下所示：

var mySlide = new Fx.Slide('slider_content').hide();
于 2012-11-14T13:40:32.563 回答
0
  1. 将style="display:none"HTML 代码添加到您要添加的元素中toggle()；

  2. Fx.Slide使用onComplete回调创建：

    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();
于 2015-09-30T22:21:09.263 回答