jQuery 页面隐藏折叠效果
Posted 张鑫4477
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 页面隐藏折叠效果相关的知识，希望对你有一定的参考价值。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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-1.7.2.min.js"></script>
<style type="text/css">
#d1 {
line-height: 50px;
height: 50px;
width: 300px;
background-color: red;
overflow: hidden;
}
#d2 {
line-height: 50px;
height: 50px;
width: 300px;
background-color: yellow;
overflow: hidden;
}
#d3 {
line-height: 50px;
height: 50px;
width: 300px;
background-color: blue;
overflow: hidden;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="d1">
配置方面，新车配备了真皮座椅、全景天窗、大尺寸液晶显示屏、全景影像、遥控驾驶、PM2.5绿净系统、ATS全地形模式、移动电站等配置。
动力方面，新车将继续沿用现款的2.0T涡轮增压发动机与两个电动机组成的混合动力系统，最大输出功率为205马力。传动系统与发动机匹配的是6速双离合变速箱。其0-100km/h加速时间为4.9秒。值得一提的是，新车兼具混动（HEV）和纯电（EV）两种模式，纯电续航里程为80公里。（文/汽车之家 陈硕）
</div>
<div id="d2">
路测得分：100
特斯拉 Model S P85D 于年中进行了重新设计，这款运动型4门5座电动车搭载了90千瓦时的电池组，号称续航里程可达294英里。另外，还有85千瓦时的配置可供消费者选择，经过测试，完成5小时充电之后的续航里程可以达到220英里。Model S P85D的性能非常卓越，加速之快令人震惊，操作起来也非常顺畅，舒适感油然而生。类似于ipad的中央控制中心功能虽然其全，但也会让驾驶员产生分心。此外，Model S P85D同时也配有全轮驱动和主动安全系统。但Model S P85D也有一些缺点，包括难以进入的车厢，可视性及续航里程受到限制，尤其是在寒冷的天气情况下。
</div>
<div id="d3">
路测得分：99
在豪华型轿车当中，宝马7系一直不敌奔驰S级轿车，但现款7系轿车无论是驾驶的稳定性、动力系统的顺畅感，操作便利性、内饰的豪华性都大大超乎人们的意料。基本款740i搭载的是3.0升6缸涡轮增压引擎，而最具代表性的750i则搭载的是4.4升V8涡轮增压引擎，最大功率可达445hp，采用的是全轮驱动系统。750i的车厢十分静谧，在细节设计和座椅的舒适性上是其他车型难以匹敌的。此外，内饰的质量也让人眼前一亮，内置木饰、皮革、铝制设计等使这款车型的现代感尽显。
</div>
<div></div>
</form>
</body>
</html>
<script type="text/javascript">
//这里为什么要这么写?
//获取auto高度的时候会执行一遍auto高度变化的代码,变成页面加载完成后页面中的div高度为auto高度,
//这里需要在后面让他再变回默认高度就可以了, 也不会出现闪屏的问题.
var autoHeight1 = $("#d1").css(‘height‘, ‘auto‘).height();
var height1 = $("#d1").css(‘height‘, ‘50‘).height()
$("#d1").toggle(
function () { $("#d1").animate({ height: autoHeight1 }, 500); },
function () { $("#d1").animate({ height: "50" }, 500); });
var autoHeight2 = $("#d2").css(‘height‘, ‘auto‘).height();
var height1 = $("#d2").css(‘height‘, ‘50‘).height()
$("#d2").toggle(
function () { $("#d2").animate({ height: autoHeight2 }, 500); },
function () { $("#d2").animate({ height: "50" }, 500); });
var autoHeight3 = $("#d3").css(‘height‘, ‘auto‘).height();
var height1 = $("#d3").css(‘height‘, ‘50‘).height()
$("#d3").toggle(
function () { $("#d3").animate({ height: autoHeight3 }, 500); },
function () { $("#d3").animate({ height: "50" }, 500); });
</script>
以上是关于jQuery 页面隐藏折叠效果的主要内容，如果未能解决你的问题，请参考以下文章