Question

我一直在网上寻找一个js / jquery解决方案，并在一个具有设定高度的div（例如20px;）上进行stackoverflow，在用户点击[read more]之后，它打开到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扩展了click而不是[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>

javascript或jquery，单击链接并展开div

4 个答案: