javascript - jquery on click事件显示内容

Question

我正在尝试在页面 http://www.ovariancancer.org/ 中做类似的事情问题出在类 event_content 我只需要显示有限的内容，当内容越过我需要隐藏的有限内容然后当我点击类 plus 我需要显示所有的内容。

$(document).ready(function(){
    $(".plus").click(function(){
        alert('hi sudheer');
        $(".event_content").slideDown("slow");
    });
});

.event_profit{
  background: #ecece9;
  width: 100%;
  float: left;
  border-bottom: 2px solid #fff;
  height:180px;
  }  

.plus{
  width:5%;
  margin-top: 5%;
  margin-left: 5%;
}
.event_content p{
	margin: 10px 0;
}
.maincontainer{
 width:100%;
 display: -webkit-inline-box;

}
.event_image{
  width: 15%;
  margin-left: 2%;
  margin-top:1%;
}

.event_content{
 width: 70%;
  margin-top: 2%;
  margin-left: 2%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="event_profit">
	
	<div class="maincontainer">
	
		<div class="event_image">
		
		<img src="http://www.charitywater.org/blog/../../_files/blog/wp-content/uploads/2015/03/blog-charity-water-thank-you-instameets.png" class="img-circle" style="height:150px;width:150px">
	
		</div>
		
		<div class="event_content">
			<p>
			</p>
			<p>  Angelina Jolie Pitt recently announced that she has had her ovaries and fallopian tubes removed in order to reduce her risk of ovarian cancer. 
				 Ms. Jolie Pitt had previous shared that she has a mutation in the BRCA gene, which increases her risk of breast and ovarian cancers. 
				 The Alliance received many calls and requests to comment from media outlets; expand this story for links to some of our news coverage.
			</p>
		
		</div>
		
		<div class="plus">
			<img src="http://www.ovariancancer.org/wp-content/themes/ovariancancer/images/plus2.png" style="width:33px;height:33px;"/>
		</div>
	
	</div>


</div>

Answer 1

在这种情况下，您可以将内容的高度调整为固定高度，然后在单击高度时使用 .css 或 .animate 使用 jquery:自动；无法让按钮在片段中工作，jquery 很可能丢失了？

$(document).ready(function(){
    $(".plus").click(function(){
        alert('hi sudheer');
        $(".event_content").css({ 'height' : 'auto' });
    });
});

.event_profit{
  background: #ecece9;
  width: 100%;
  float: left;
  border-bottom: 2px solid #fff;
  height:180px;
  }  

.plus{
  width:5%;
  margin-top: 5%;
  margin-left: 5%;
}
.event_content p{
	margin: 10px 0;
}
.maincontainer{
 width:100%;
 display: -webkit-inline-box;

}
.event_image{
  width: 15%;
  margin-left: 2%;
  margin-top:1%;
}

.event_content{
 width: 70%;
  margin-top: 2%;
  margin-left: 2%;
  height: 47px;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="event_profit">
	
	<div class="maincontainer">
	
		<div class="event_image">
		
		<img src="http://www.charitywater.org/blog/../../_files/blog/wp-content/uploads/2015/03/blog-charity-water-thank-you-instameets.png" class="img-circle" style="height:150px;width:150px">
	
		</div>
		
		<div class="event_content">
			<p>
			</p>
			<p>  Angelina Jolie Pitt recently announced that she has had her ovaries and fallopian tubes removed in order to reduce her risk of ovarian cancer. 
				 Ms. Jolie Pitt had previous shared that she has a mutation in the BRCA gene, which increases her risk of breast and ovarian cancers. 
				 The Alliance received many calls and requests to comment from media outlets; expand this story for links to some of our news coverage.
			</p>
		
		</div>
		
		<div class="plus">
			<img src="http://www.ovariancancer.org/wp-content/themes/ovariancancer/images/plus2.png" style="width:33px;height:33px;"/>
		</div>
	
	</div>


</div>