思路是：
容器 包括{ 显示的选项内容， 隐藏的选项内容， 按钮--更多选项/收起}
简单的展示和收起
手机-商品刷选
网络：移动4G 联通3G 电信 3G
价钱：5000以上 4000-4999 3000-3999
特点：JDPhone计划 '0' 元购机 防水 长待机
var phn=document.getElementById("hpn");
alert(phn);
var str=document.getElementById("strHref");
str.onclick=function(){
if( phn.style.display=='none'){
phn.style.display='block';
this.innerHMTL='收起';
}else{
phn.style.display='none';
this.innerHMTL='更多选项+';
}
}
新浪网站的广告效果
body{ margin:0 auto; padding:0; margin:0;}#pn,p{margin:0 auto;width:930px;height:auto;text-align:center;padding:10px;}#pn{ background: #e8e8e8; height: 60px; width: 600px; display: block; margin: 0 auto; padding: 5px; font-size: 9pt; height: auto; text-align: center;}p{margin: 0;padding: 0;width: 600px;border-top: solid 4px gray;margin: 0 auto;}var time=300;
var h=0;
function add(){
if(time>0){
time--;
h=h+5;
}else{
return;
}
if(h>=300){
return;
}else{
document.getElementById("pn").style.height=h+'px'; }
setInterval('add()',30);
}
var t=300;
var n=300;
function hide(){
if(t>0){
t--;
n-=5;
}else{
return;
}
if(n<=0){
document.getElementById("pn").style.display='none';
return;
}else{
document.getElementById("pn").style.height=n+'px';
}
setInterval('hide()',30);
}
window.onload=function(){
add();
setInterval('hide()',3000);
document.getElementsByTagName("p").onclick=function(){
add();
}
jquery:toggle()方法
可以依次调用n个指定的函数。
直到最后一个函数，然后重复对这个函数轮番调用
语法:
toggle(fna,fn2,fn3,])
1.jQuery的toggle()方法，可以依次调用N个指定的函数，直到最后一个函数，然后重复对这个函数轮番调用
语法：toggle(fn,fn2,...)
2.jQuery中$(document).ready(function (){})或者 $(function(){}); 等同于window.onload=function (){}
3.jQuery中text()修改文本内容等同于js中的innerText（）。
4.jQuery中html()修改内部HTML代码，等同于JS中的innerHTML()
5.jQuery中show(1000)展开，1000是速度，可选
6.innerHTML与innerText区别
innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。
innerText指的是从起始位置到终止位置的内容,但它去除Html标签。
$("document").ready(function(){
$(".btn-slide").click(function () {
$("#hpn").slideToggle();
});
})
