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

我一直在寻找一个js/jQuery解决方案的网络和一个具有设置高度的div（例如20px;）和用户单击[阅读更多]打开到自动或150px的高度; （完整内容）javascript或jquery，点击一个链接，并展开div

例子：

<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]我希望这就是明确的。

来源

2013-11-22 James

很抱歉，但你在哪里卡住了??? –

你能告诉我们你到底有什么？ –

啊，对不起，我应该澄清。我不知道该怎么做。我不是JS。我发现工作的唯一选择是点击div并扩大。但是在我的内容中有超链接会打开或关闭div，然后转到url。不是一个干净的选择。 – James

只是为了扩大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'); 
});

来源

2013-11-22 11:39:12

有没有办法再次点击并关闭div？ – James

当然，看到更新的答案 –

太棒了！非常感谢。完美工作！ – James

类似的东西...可以优化...

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

来源

2013-11-22 11:35:29 Oliboy50

试试这个

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

来源

2013-11-22 11:38:35

试试这个的jsfiddle：http://jsfiddle.net/RPBBg/

你需要的是一个toggler DIV

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

来源

2013-11-22 11:38:50