javascript或jquery，點擊一個鏈接，並展開div

Question

我一直在尋找一個js/jQuery解決方案的網絡和一個具有設置高度的div（例如20px;）和用戶單擊[閱讀更多]打開到自動或150px的高度; （完整內容）

例子：

<style> 
.small {height: 20px;} 
.big {height: auto;} 
</style> 


<div class="small"> 
    <p>Lorenter code hereem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
    eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
    nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, 
    consectetur adipisicing elit, sed do eiusmod tempor incididunt 
    ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
    consequat.</p> 
    <a href="#">Click to read more</a> 
</div> 

感謝您的幫助。

編輯：伊夫嘗試這樣做：

在href：的onclick = 「JavaScript的：toggleContent（此，真）;」

隨着這樣的：

<script type='text/javascript'> 
$(window).load(function(){ 
comment_reply = function (id){ 

    var e = $(id); 
    e.toggle(); 
} 
}); 
</script> 

有這個問題是div擴展上點擊，而不是[A HREF]我希望這就是明確的。

Answer 1

只是爲了擴大DIV，你可以用下面的代碼：

$('.wrapper').find('a[href="#"]').on('click', function (e) { 
    e.preventDefault(); 
    $(this).closest('.wrapper').find('.small').toggleClass('small big'); 
}); 

其中包裝是用於讓鏈接顯示

DEMO

更新的代碼

爲了使崩得：

DEMO

$('.wrapper').find('a[href="#"]').on('click', function (e) { 
    e.preventDefault(); 
    this.expand = !this.expand; 
    $(this).text(this.expand?"Click to collapse":"Click to read more"); 
    $(this).closest('.wrapper').find('.small, .big').toggleClass('small big'); 
}); 

Answer 2

類似的東西...可以優化...

$(document).ready(function(){ 
    $(document).on('click', '.small a', function(){ 
     $('.small').addClass('big'); 
     $('.small').removeClass('small'); 
    }); 
    $(document).on('click', '.big a', function(){ 
     $('.big').addClass('small'); 
     $('.big').removeClass('big'); 
    }); 
}); 

Answer 3

試試這個

CSS

.text.short { 
    height: 50px; 
    overflow: hidden; 
} 
.text.full { 

} 
.read-more { 
    cursor: pointer; 
    display: inline-block;  
    font-weight: bold; 
    padding: 3px; 
    background-color: #06c; 
    color: white; 
    margin: 2px; 
} 

腳本

$(document).ready(function(){  
    $(".read-more").click(function(){   
     var $elem = $(this).parent().find(".text"); 
     if($elem.hasClass("short")) 
     { 
      $elem.removeClass("short").addClass("full");   
     } 
     else 
     { 
      $elem.removeClass("full").addClass("short");   
     }  
    }); 
}); 

DEMO

Answer 4

試試這個的jsfiddle：http://jsfiddle.net/RPBBg/

你需要的是一個toggler DIV

<div id="toggle" onclick="$('.small').css('height','auto');">Click to read more</div>