javascript或jquery，点击链接并展开div [英] javascript or jquery, Click on a link and expand a div

问题描述

我一直在寻找一个js / jquery解决方案的网和stackoverflow为一个div，有一个设置的高度（例如20px;）和用户点击[阅读更多]后，它打开到一个高度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 labouris 
 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 =＃>点击阅读更多< / a> 
< / div> 
  

感谢您的帮助。

：Ive tried this：

在href：onclick =javascript：toggleContent（this，true）; p>

 < script type ='text / javascript'> 
 $（window）.load（function（）{
 comment_reply = function（id）{
 
 var e = $（id）; 
 e.toggle ）; 
} 
}）; 
< / script> 
  

问题是div在点击时展开，而不是[a href] 。

解决方案

只要展开DIV，就可以使用下面的代码：

  $（'。wrapper'）。find（'a [href =＃]'）。on（'click'，function（e）{
 e。 preventDefault（）; 
 $（this）.closest（'。wrapper'）。find（'。small'）。toggleClass（'small big'）; 
} 
  

其中包装器用于显示链接

DEMO

UPDATED代码

使其折叠：

DEMO

  $（'。wrapper'）。find（'a [href =＃ ]'）。on（'click'，function（e）{
 e.preventDefault（）; 
 this.expand =！this.expand; 
 $（this）.text this.expand？Click to collapse：点击阅读更多）; 
 $（this）.closest（'。wrapper'）。find（'。small，.big'）。toggleClass big'）; 
}）; 
  

I have been looking a js/jquery solution on the net and stackoverflow for a div that has a set height (example 20px;) and after the user clicks [read more] it opens to a height of auto or 150px; (full content)

Example:

<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>

Thanks for the help.

EDIT: Ive tried this:

In the href: onclick="javascript:toggleContent(this, true);"

Along with this:

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

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

The problem with that is the div expands on click rather than an [a href] I hope thats clear.

解决方案

Just to expand DIV, you can use following code:

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

Where wrapper is used to let link being displayed

DEMO

UPDATED code

To make it collapse too:

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

这篇关于javascript或jquery，点击链接并展开div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！