javascript 或 jquery，点击一个链接并展开一个 div

Question

我一直在网上寻找 js/jquery 解决方案，并在 stackoverflow 上寻找具有设置高度(例如 20px；)的 div，在用户单击 [阅读更多] 后，它会打开到 auto 或 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(this, true);"

伴随着这个:

<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');
});

wrapper是用来显示链接的地方

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');
});