![]()
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/Jquery/jquery-1.7.1.min.js"></script>
<style type="text/css">
#thc-count
{
width: 400px;
margin: 0 auto;
border: 2px solid black;
}
.thc-count-top
{
width: 380px;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #ae9f9f;
margin: 10px;
overflow: hidden;
/*text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;*/
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="thc-count">
<div class="thc-count-top">
<p>1</p>
</div>
<div class="thc-count-top">
<p>1</p>
<p>2</p>
</div>
<div class="thc-count-top">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<div class="thc-count-top">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
</div>
</div>
</form>
</body>
</html>
<script type="text/javascript">
$(".thc-count-top").toggle(
function () {
var hei = $(this).css('height', 'auto').height();//div 默认用文字撑起来的高度
$(this).css('height', '50px');//div 最小的高度
$(this).animate({ height: hei }, 500)
},
function () { $(this).animate({ height: "50" }, 500) });
</script>
文本框折叠，展示