부모 높이를 어린이 높이로 변경하십시오.

Question

jquery 플러그인 dotdotdot을 사용하여 텍스트 블록 뒤에 '... 자세히 알아보기 >>'를 만듭니다. 사용자가 링크 ('자세히 >> >>')를 클릭하면 전체 텍스트가 보이도록 div가 확장되어야합니다. 첫 번째 부분은 훌륭하지만 두 번째 부분은 알 수 없습니다.

<script type="text/javascript" language="javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" language="javascript" src="js/jquery.dotdotdot.min.js"></script> 
<script type="text/javascript" language="javascript"> 
     $(function() { 
      $('#dot3').dotdotdot({ 
       after: 'a#test' 

      }); 
     }); 
<style type="text/css" media="all"> 
     div.example { 
      padding: 0 0 150px 0; 
     } 
     div.example:after { 
      content: ''; 
      display: block; 
      clear: both; 
     } 
     div.r { 
      width: 275px; 
     } 
     div.box { 
      border: 1px solid #ccc; 
      height: 160px; 
      padding: 15px 20px 10px 20px; 
      overflow:visible; 
     } 
</style> 
<div class="example"> 
      <div class="r"> 
       <div class="box after" id="dot3">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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
        <a href="#" id="test" onClick="">Read more &raquo;</a></div> 
      </div> 
     </div> 

Answer 1

가 그냥 파괴 호출하고 DIV의 크기를 조정 :

이

내 코드입니다.

두 번째 부분은 무엇

$("#test").click(function() { 
    var div = $('#dot3'); 
    div.trigger('destroy'); 
    div.css("height", "auto"); 
}); 

Here is fiddle.