Question

我遇到了jquery扩展和崩溃的问题。

我打算在我的网站上阅读更多功能，我想利用这个例子。

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

如果你看到点击标题会展开内容并点击两次会产生最小化的结果，但我的问题是显示内容的某些部分，例如div的30px高度，点击标题后它会展开并显示整个内容。

Answer 1

我创建了一个jsfiddle，它显示了一种方法来完成你想要做的事情。

这是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/

Jquery展开折叠

2 个答案: