展开与收起效果_学习笔记

首页免费课展开与收起效果笔记

展开与收起效果

                
                zongran
            Web前端工程师

                    查看讲师更多课程 
                    zongran讲师的其他课程
                
商城分类导航效果
初级·63740
免费课程
                                
                难度初级
            
                时长 1小时 0分
            
                学习人数
            
综合评分9.73
                            101人评价
                        查看评价
                                9.7
                                内容实用
                            
                                9.8
                                简洁易懂
                            
                                9.7
                                逻辑清晰

最热最新

ModelSue

ceshi我要测试

查看全部

0 采集收起来源：效果简介
2021-08-09
0408aodiZhang

（）

查看全部

0 采集收起来源：使用HTML/CSS实现静态布局
2018-11-26
慕码人8106482

模糊

查看全部

0 采集收起来源：练习题
2018-10-16
一米阳光0704 00:19

1.9版本以上都废除toggle了，用if代替

查看全部

0 采集收起来源：静态布局制作
2018-10-07
哈尔波儿

QQ阅读类似的展开收起
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
margin: 0 auto;
padding: 0;
font-size: 9pt;
line-height: 180%;
}
#pn
{
background: #f8f8f8;
height: auto;
width: 750px;
margin: 0 auto;
padding: 5px;
}
.artTitle
{
font-weight: bold;
color: #3030FF;
font-size: 11pt;
}
.subTitle
{
color: #CCC;
}
.content
{
border: 1px solid #CCC;
display: none;
padding: 5px;
}
.btm
{
text-align: right;
height: 30px;
}
.btn
{
width: 80px;
height: 20px;
padding: 5px 3px 5px 3px;
text-align: center;
text-decoration: none;
background: #f0f0f0;
border: 1px solid #CCC;
}
</style>
<script type="text/javascript">

// 显示函数
function showdiv(obj){
var x=obj.parentNode;
var y=x.nextSibling;
if(y.nodeType!=1){
y=y.nextSibling;
}
y.style.display="block";
x.style.display="none";
}
function hidediv(obj){
var y=obj.parentNode.parentNode;
var x=y.previousSibling;
if(x.noneTyoe!=1){
x=x.previousSibling;
}
x.style.display="block";
y.style.display="none";

}

</script>
</head>
<body>
<div id="pn">
<div id="art0">
<p class="artTitle">
Slack：团队日常沟通协作工具典范
</p>
<p class="subTitle">
作者：来自网络发表时间：2014-3-1
</p>
<p>
现在可以在Slack.com上申请成为试用用户，这是一个面对企业、团队的协作工具，似乎需要试用企业域名后缀的邮箱。 Slack从目前看，基本符合我对团队沟通工具的完全要求。特点如下：
在所有端都可以进行，即桌面端，包括Mac OS和Windows系统；web端即浏览器；移动端的支持包括iOS和Android。同时，移动端是有良好体验以满足移动办公便利性的。
聚焦核心行为，即"发布一条信息"，团队成员只需要做一个这个基本行为即可。发布一条... <a href="#" onclick="showdiv(this)">全文</a></p> //点击全文实现展开
<div class="content">
<p>
现在可以在Slack.com上申请成为试用用户，这是一个面对企业、团队的协作工具，似乎需要试用企业域名后缀的邮箱。 Slack从目前看，基本符合我对团队沟通工具的完全要求。特点如下：</p>

<p>
聚焦核心行为，即“发布一条信息”，团队成员只需要做一个这个基本行为即可。</p>
<p>
发布一条信息这个行为可以扩展成为该信息是一个图片或者一个文件等，以便协作更好进行，如果文件能快速预览则更好。</p>
<p>
支持@方式直接和单个团队成员沟通，并且能够被其他成员看到和参与进来。</p>
<p>
以#来进行快速形成话题组或者项目组。</p>
<p>
良好的搜索支持。上述虽然是Slack的特性，也是我对团队日常协作工具的要求——显然，Slack完全符合这些要求，而且产品做得很易用。这些要求其实就是我对“移动、社交、云端存储”的理解，这三个因素基本会重写很多软件和应用。</p>
<p>
Slack有免费的lite版本，但收费版本似乎价格对中文用户而言略高。</p>
<p>
Slack由我很喜欢的项目Flickr的创始人新公司TinySpeck创办，因此基础甚好。而且从目前看，基本上会成为一个很成功的应用，所以在产品持续发展上面应该毫无问题。</p>
<p>
The post Slack：团队日常沟通协作工具典范 appeared first on 游山打猎.</p>
<div class="btm">
<a href="#" class="btn" onclick="hidediv(this)">收起全文</a> //点击收起全文实现收起
</div>
</div>
</div>
<hr />
<div id="art1">
<p class="artTitle">
Slack：团队日常沟通协作工具典范
</p>
<p class="subTitle">
作者：来自网络发表时间：2014-3-1
</p>
<p>
现在可以在Slack.com上申请成为试用用户，这是一个面对企业、团队的协作工具，似乎需要试用企业域名后缀的邮箱。 Slack从目前看，基本符合我对团队沟通工具的完全要求。特点如下：
在所有端都可以进行，即桌面端，包括Mac OS和Windows系统；web端即浏览器；移动端的支持包括iOS和Android。同时，移动端是有良好体验以满足移动办公便利性的。
聚焦核心行为，即"发布一条信息"，团队成员只需要做一个这个基本行为即可。发布一条... <a href="#" onclick="showdiv(this)">全文</a></p> //点击全文实现展开
<div class="content">
<p>
现在可以在Slack.com上申请成为试用用户，这是一个面对企业、团队的协作工具，似乎需要试用企业域名后缀的邮箱。 Slack从目前看，基本符合我对团队沟通工具的完全要求。特点如下：</p>
<p>
在所有端都可以进行，即桌面端，包括Mac OS和Windows系统；web端即浏览器；移动端的支持包括iOS和Android。</p>
<p>
同时，移动端是有良好体验以满足移动办公便利性的。</p>
<p>
聚焦核心行为，即“发布一条信息”，团队成员只需要做一个这个基本行为即可。</p>
<p>
发布一条信息这个行为可以扩展成为该信息是一个图片或者一个文件等，以便协作更好进行，如果文件能快速预览则更好。</p>
<p>
支持@方式直接和单个团队成员沟通，并且能够被其他成员看到和参与进来。</p>

<p>
The post Slack：团队日常沟通协作工具典范 appeared first on 游山打猎.</p>
<div class="btm">
<a href="#" class="btn" onclick="hidediv(this)">收起全文</a> //点击收起全文实现收起
</div>
</div>
</div>


</div>
</body>
</html>

查看全部

0 采集收起来源：编程练习
2018-08-06
哈尔波儿

定时展开收起
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自动展开</title>
<style type="text/css">
body
{
margin: 0 auto;
padding: 0;
}
a:focus
{
outline: none;
}

#pn
{
background: #e8e8e8;
height: 120px;
width: auto;
display: block;
margin: 0 auto;
padding: 5px;
text-align: center;
overflow:hidden;
}
.slide
{
padding: 10px;
width: 960px;
margin: 0 auto;
background: gray;
text-align: center;
height: 40px;
line-height: 40px;
color: #fff;
}
</style>
<script type="text/javascript">
//增加高度函数addH()
var h = 0;
function addh() {
if(h < 120){
h+=2;
document.getElementById('pn').style.height = h +'px';
}else{
return;
}
setTimeout('addh()',30);
}

//网页加载完毕时，调用增加高度函数addH()，等待5秒钟后调用减少高度函数subh()。
window.onload = function(){
addh();
setTimeout('subh()',5000);
}
// 减少高度函数subH()
function subh() {
if(h > 0){
h-=2;
document.getElementById('pn').style.height = h +'px';
}else{
return;
document.getElementById('pn').style.display = 'none';
document.getElementById('pn').style.height = 0;
}
setTimeout('subh()',30);
}
</script>
</head>
<body>
<div id="pn">
<h1>
欢迎来到慕课网</h1>
<h2>
大幅广告</h2>
</div>
<p class="slide">
慕课网欢迎你</p>
</body>
</html>

查看全部

0 采集收起来源：编程练习
2018-08-06
哈尔波儿

点击展开，收起
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
margin: 0 auto;
padding: 0px;
}
#pn
{
background: #e8e8e8;
width: 600px;
height: auto;
margin: 0 auto;
padding: 5px;
font-size: 9pt;
}
.slide
{
margin: 0;
padding: 0;
width: 600px;
border-top: solid 4px gray;
margin: 0 auto;
}
.btn-slide
{
background: gray;
text-decoration: none;
text-align: center;
width: 120px;
height: 30px;
padding: 10px 0 0 0;
display: block;
color: #FFF;
margin: 0 auto;
}
</style>
<script type="text/javascript">
function showdiv() {//展开函数
document.getElementById("hpn").style.display="block";
document.getElementById("strHref").innerHTML="收起";
document.getElementById("strHref").href="javascript:hidediv()";
}
function hidediv() {//收起函数
document.getElementById("hpn").style.display="none";
document.getElementById("strHref").innerHTML="展开";
document.getElementById("strHref").href="javascript:showdiv()";

}
</script>
</head>
<body>
<div id="pn">
<p>
手机 - 商品筛选</p>
<p>
网络：移动4G 联通3G 电信3G</p>
<div id="hpn">
<p>
价格：5000元以上 4000-4999 3000元以下</p>
<p>
特点：0元购机防水长待机</p>
</div>
</div>
<p class="slide">
<a href="javascript:showdiv()" id="strHref" class="btn-slide">展开</a> 
</p>
</body>
</html>

查看全部

0 采集收起来源：编程练习
2018-08-06
哈尔波儿 03:20

两者的关系式

查看全部

0 采集收起来源：使用JavaScript实现收起效果
2018-07-30
哈尔波儿 01:08

考虑兼容性

查看全部

0 采集收起来源：浏览器兼容性
2018-07-30
慕粉9644264 04:50

html结构

查看全部

0 采集收起来源：使用HTML/CSS实现静态布局
2018-07-13
慕容初晨

展开与收起主要学了： document,getElementById()查找元素 onload()事件 setTimeout（code, millisec）事件 jQuery：toggle()：但是在1.9以上的包含1.9的jquery版本已经移除了 parentNode、nextSibling、previousSibling属性

查看全部

0 采集收起来源：回顾总结
2018-01-15
慕容初晨

浏览器上'报错：Uncaught TypeError: Cannot set property 'display' of undefined的注意了nextSibling,previousSibling会将空格或者换行当做节点处理，p标签后有换行，所以你需要使用两次，如var y=x.nextSibling.nextSibling; 或者换成nextElementSibling和previousElementSibling，同时注意这两个IE8及以下不兼容

查看全部

0 采集收起来源：浏览器兼容性
2018-01-15
慕瓜5189485

var $ = function(val) { if(val.indexOf("#") + 1) { return document.getElementById(val.substr(1)); } else { return document.getElementsByTagName(val); } } var w = 0; //增加广告宽度函数 function addW() { if(w < 100) { $("#adv").style.display = "block"; w += 5; $("#adv").style.width = w + "%"; if(w > 40) { $("#txt").style.display = "block"; $("#txt").style.opacity = w / 100; }; setTimeout(addW, 100); } else { return; } } //在网页加载完毕时，调用增加宽度函数，等待5秒钟后调用减少宽度函数。 window.onload = function() { addW(); setTimeout(subW, 5000); } //减少广告宽度函数 function subW() { if(w > 0) { w -= 5; $("#adv").style.width = w + "%"; $("#txt").style.opacity = w / 100; if(w < 50) { $("#txt").style.display = "none"; }; setTimeout(subW, 100); } else { $("#adv").style.display = "none"; return; } }

查看全部

0 采集收起来源：编程挑战
2018-03-22
慕瓜5189485

function showdiv(obj) { //obj.parentNode.nextSibling.nextSibling.style.display = "block"; var x = obj.parentNode.nextSibling; //包含众多空格作为文本节点，因此在我们使用nextSibling和previousSibling时就会出现问题。 //因为FireFox会把文本节点误当做元素节点的兄弟节点来处理。我们可以添加nodeType来判断。 //当上一节点或者是下一节点为文本节点时，就继续寻找，直到找到下一个元素节点。 // 其中nodeType的值主要有以下几种： // 元素节点的nodeType值为1 // 属性节点的nodeType值为2 // 文本节点的nodeType值为3 while(x.nodeType != 1) { x = x.nextSibling; } x.style.display = "block"; obj.parentNode.style.display = "none"; } function hidediv(obj) { obj.parentNode.parentNode.style.display = "none"; var x = obj.parentNode.parentNode.previousSibling; while(x.nodeType != 1) { x = x.previousSibling; } x.style.display = "block"; }

查看全部

0 采集收起来源：浏览器兼容性
2018-03-22
慕瓜5189485 03:07

nextSibling 返回某个元素之后紧跟的元素(同一层级) previousSibling 返回某节点之前紧跟的节点(同一层级)

查看全部

0 采集收起来源：使用JavaScript实现展开效果
2017-11-11
慕瓜5189485

1.9版本之后toggle()就废除了 $(document).ready(function() { $("#hrefStr").click(function(){ if($("#hpn").is(":visible")){ $("#hpn").hide(1000,function(){ $("#hrefStr").text("更多选项+");}); } else{ $("#hpn").show(800,function(){ $("#hrefStr").text("收起-");}); } }); });

查看全部

0 采集收起来源：jQuery实现点击按钮展开和收起动画效果
2018-03-22
riyyao 06:07

function showdiv(obj){ var x=obj.parentNode; //摘要 var y=x.nextSibling; //正文 x.style.display="none"; y.style.display="block"; //点击showdiv，显示正文内容 }

查看全部

0 采集收起来源：使用JavaScript实现展开效果
2018-03-22
riyyao 04:55

nextSibling 返回某个元素之后紧跟的元素 previousSibling 返回某节点之前紧跟的节点

查看全部

0 采集收起来源：使用JavaScript实现展开效果
2017-07-23
riyyao 04:41

function showdiv() { document.getElementById("hpn").style.display = "block"; //设置id为strHref元素，链接为隐藏 document.getElementById("strHref").href = "javascript:hidediv();"; document.getElementById("strHref").innerHTML = "收起-"; } function hidediv() { document.getElementById("hpn").style.display = "none"; // document.getElementById("pn").style.height='60px'; document.getElementById("strHref").href = "javascript:showdiv();"; document.getElementById("strHref").innerHTML = "更多选项+"; }

查看全部

0 采集收起来源：使用JavaScript实现动态效果
2018-03-22
qq_绝影_1

<a href="javascript:showdiv()" id="strHref" class="btn-slide">展开</a>

查看全部

0 采集收起来源：编程练习
2018-03-22
WEB丶FriEnD

+ -

查看全部

0 采集收起来源：编程挑战
2017-05-23
WEB丶FriEnD

Removed 1.9 1.9版本 .toggle(function, function, … ) 方法删除

查看全部

0 采集收起来源：编程练习
2017-05-22