javascript - jQuery 展开 折叠

Question

我在使用 jquery 展开和折叠时遇到问题。

我计划在我的网站上有一个阅读更多功能，我想利用这个例子。

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

如果您可以看到单击标题会扩展内容并单击两次会产生最小化的结果，但我在这里的问题是显示部分内容，例如距 div 30px 的高度，当单击标题时，它会展开并显示整个内容.

Answer 1

我创建了一个 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 属性 overflow: hidden;

.section{ overflow: hidden; }

Answer 2

你想要的实际上是一架手风琴。如果您想要更专业的外观，可以使用 jQuery UI 的手风琴。这是：jqueryui.com/accordion/