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 に答える