javascript - Jquery 展開 折りたたむ

Question

jquery の展開と折りたたみに問題があります。

サイトに続きを読む機能を追加する予定で、この例を利用したいと考えています。

http://www.designgala.com/demos/collapse-expand-jquery.html

ヘッダーをクリックするとコンテンツが展開され、2回クリックすると最小化されますが、ここでの問題は、divから高さ30pxのようなコンテンツの一部を表示することであり、ヘッダーをクリックすると展開され、コンテンツ全体が表示されます.

Answer 1

あなたが欲しいのは、実際にはアコーディオンです。よりプロフェッショナルな外観が必要な場合は、jQuery UI のアコーディオンを使用できます。ここにあります：jqueryui.com/accordion/

Answer 2

あなたがやりたいことをする方法を示すjsfiddleを作成しました。

http://jsfiddle.net/cSvAB/2/

これがJavaScriptです：

$( '.section' ).each( function( index, value ){

    $( value ).data( 'height', $( this ).height() );
    $( value ).css( {height: 30} );
});

$( '.section .header' ).click( function(){

    if( $( this ).data( 'expanded' ) ){

      $( this ).parent().animate( {height: 30} );
      $( this ).data( 'expanded', false );
    }else{

      $( this ).parent( ).animate( {height: $( this ).parent().data( 'height' )} );
      $( this ).data( 'expanded', true );
    }
});

HTMLは次のとおりです。

<div class="section">
  <div class="header">Click to read more</div>
  <div>Lots of text here</div>
</div>

<div class="section">
  <div class="header">Click to read more</div>
  <div>Lots of text here</div>
</div>

他の唯一の重要なことは、.section に css 属性が与えられていることです。

.section{ overflow: hidden; }