jQuery 展开折叠答案

【问题标题】：Jquery Expand CollapsejQuery 展开折叠
【发布时间】：2013-01-15 02:42:24
【问题描述】：

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

我计划在我的网站上添加阅读更多功能，我想利用这个示例。

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

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

【问题讨论】：

标签： javascript jquery

【解决方案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; }

【讨论】：

我尝试将标题重命名为“阅读更多”并将其放在扩展内容的下方，但这是不可能的。有没有办法解决它？（抱歉 CSS 不好）

【解决方案2】：

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

【讨论】：