點擊展開div與轉換

Question

我正在做一個div來展開點擊的高度。我嘗試了一些我在這裏找到的方法，但沒有爲我工作。

jQuery('.readMore').click(function() { 
 
    jQuery(this).parent().toggleClass('rm-cont-hidden'); 
 
});

.rm-container { 
 
    float: left; 
 
    width: 100%; 
 
    background: #f7f7f7; 
 
    margin-bottom: 10px; 
 
    padding: 10px; 
 
    font-size: 13px; 
 
    color: #777; 
 
} 
 

 
.rm-text { 
 
    float: left; 
 
    width: 100%; 
 
} 
 

 
.rm-container.rm-cont-hidden .rm-text { 
 
    max-height: 34px; 
 
    overflow: hidden; 
 
    transition: max-height 0.3s ease-out; 
 
} 
 

 
.rm-container .rm-text { 
 
    max-height: auto; 
 
    transition: max-height 0.3s ease-in; 
 
} 
 

 
.readMore { 
 
    float: left; 
 
    width: 100%; 
 
    color: blue; 
 
    text-align: center; 
 
    padding: 5px 0px 0px 0px; 
 
    font-size: 16px; 
 
} 
 

 
.readMore:hover { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-4"> 
 

 

 
     <div class="rm-container rm-cont-hidden"> 
 

 
     <div class="rm-text"> 
 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
 
     </div> 
 
     <div class="readMore"> 
 
      + 
 
     </div> 
 

 
     </div> 
 

 

 
    </div> 
 
    </div> 
 
</div>

我想股利爲 「開/擴展」 與過渡。

Answer 1

toggleSlide（）

滑動使用jquery動畫可用於展開和摺疊的功能或效果基本show（）或了slideDown（）可以被替代地使用代替（順便說一句它是一個漫長的過程）

Answer 2

不能使用auto高度/寬度進行過渡。獲得結果最簡單的方法之一是設置一個精確的值，以使用轉換爲其設置動畫效果。查看這個link瞭解更多細節和其他選項以獲得輸出。檢查下面的代碼片段以供參考。

jQuery('.readMore').click(function() { 
 
    jQuery(this).parent().toggleClass('rm-cont-hidden'); 
 
});

.rm-container { 
 
    float: left; 
 
    width: 100%; 
 
    background: #f7f7f7; 
 
    margin-bottom: 10px; 
 
    padding: 10px; 
 
    font-size: 13px; 
 
    color: #777; 
 
} 
 

 
.rm-text { 
 
    float: left; 
 
    width: 100%; 
 
} 
 

 
.rm-container.rm-cont-hidden .rm-text { 
 
    max-height: 34px; 
 
    overflow: hidden; 
 
    transition: max-height 0.3s ease-out; 
 
} 
 

 
.rm-container .rm-text { 
 
    max-height: 500px; 
 
    transition: max-height 0.3s ease-in; 
 
} 
 

 
.readMore { 
 
    float: left; 
 
    width: 100%; 
 
    color: blue; 
 
    text-align: center; 
 
    padding: 5px 0px 0px 0px; 
 
    font-size: 16px; 
 
} 
 

 
.readMore:hover { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-4"> 
 

 

 
     <div class="rm-container rm-cont-hidden"> 
 

 
     <div class="rm-text"> 
 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
 
     </div> 
 
     <div class="readMore"> 
 
      + 
 
     </div> 
 

 
     </div> 
 

 

 
    </div> 
 
    </div> 
 
</div>