iframe网址后台左右收缩型页面脚本,原生js达成信息列表展开

采取JS手艺完结QQ阅读类似的点击展开、收起成效,具体内容如下

mobaihuo网址后台免费提供_本子之家_www.jb51.net

知识要点

一、定义张开函数showdiv(),完成点击”全文”开关,全文展开。

mobaihuo网站后台免费提供

1.兑现原理很简短,通过点击a标签设置div的display属性隐藏或许呈现,

1.点击展开函数,须求将触发点击事件的按键作为参数字传送入
2.通过传播的开关,查找其父成分,将其父成分设置为隐蔽。
3.将紧跟其父成分之后的成分设置为展现。

3 屏幕切换

主要是对dom操作的操纵。

二、定义收起函数hidediv(),兑现点击”收起全文”按键,全文内容隐藏。

[Ctrl+A 全选
注:如需引进外部Js需刷新本事推行]

2.亟需接纳的dom操作:

1.点击收起函数,须求将触发点击事件的开关作为参数字传送入
2.透过传播的开关,查找其父成分,将其父成分设置为隐蔽。
3.将紧跟其父成分从前的因素设置为显示。

你或者感兴趣的文章:

  • 原生JS仿QQ阅读点击张开、收起效果
  • JS模拟的QQ面板上的多元可开展的菜单
  • JS达成牢固在右下角可开始展览裁减DIV层的艺术
  • js实现减少菜单功效实例代码
  • 在iframe里的页面编写js,完成在父窗口上创制动画效果开始展览和减少的div(不退换iframe父窗口代码)
  • Javascript
    文本框textarea高度随内容自适应抓牢收缩
  • JavaScript设置FieldSet展开与减少
  • JS仿QQ基友列表展开、缩短效能(第二篇)

parentNode 获取父级元素

注意:为了浏览器包容,一定要咬定找到的节点nodeType是不是为成分节点。

nextSibling得到下二个紧跟的节点

职能如图:

previousSibling获取上二个紧跟的节点

图片 1

3.注意事项:

具体代码:

要思量到当点击展开全文的时候,其余已经进展的全文要收起来。

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <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;
  while(y.nodeType!=1){
  y=y.nextSibling;
  }
  x.style.display="none";
  y.style.display="block";
 }

 // 隐藏函数
 function hidediv(obj) {

  var x=obj.parentNode.parentNode;
  var y=x.previousSibling;
  while(y.nodeType!=1){
  y=y.previousSibling;
  }
  x.style.display="none";
  y.style.display="block";
 }
 </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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="javascript: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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn" onclick="javascript: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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="javascript: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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn" onclick='hidediv(this)'>收起全文</a>
  </div>
 </div>
 </div>
</div>
</body>
</html>

当用nextSibling获取下三个节点时候,不相同浏览器的推断是分裂的

如上就是本文的全部内容,希望对咱们的求学抱有补助,也希望大家多多支持脚本之家。

过多获取成分,有的获得换行符也许空格,所以那边将要接纳nodeType来剖断一下数据类型nodeType只回去数字1、2、3

您恐怕感兴趣的作品:

  • JS模拟的QQ面板上的层层可举行的美食指南
  • JS实现牢固在右下角可实行缩小DIV层的方法
  • js完成缩短菜单功用实例代码
  • 在iframe里的页面编写js,完毕在父窗口上创制动画效果开始展览和收缩的div(不转移iframe父窗口代码)
  • Javascript
    文本框textarea中度随内容自适应抓实收缩
  • JavaScript设置菲尔德Set展开与减弱
  • js
    iframe网址后台左右减少型页面脚本
  • JS仿QQ亲密的朋友列表张开、裁减功用(第二篇)

唯有重返1的时候得到的才是因秋季点

(我特么做的时候没考虑到这些主题素材,还感到哪出毛病了搞了长久)

再有正是出于js里不曾像jquery里获取同级全体因素的dom操作,所以自身要好写了个siblings(elm)

而后也足以用,暂劳永逸

一体化代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.clear{clear: both;float: none;height: 0;overflow: hidden;}
body{color:#333; font: 12px/1.3 'Arial','Microsoft YaHei';}
#pn{width: 650px; height: auto; background: #fff; margin: 0 auto; padding: 5px;}
#list0{margin-bottom: 10px;}
.title{ font-weight: bold; font-size: 14px; margin-bottom: 7px;}
.time{color: #808080; margin-bottom: 2px;}
.content{display: none; padding: 1px 0 3px; line-height: 23px; font-size: 14px; }

.btm{text-align: right; height: 30px; }
.hidd{ color: #eb7350; margin-left: 5px; }
.show{ color: #eb7350; margin-left: 5px; }
.zy{padding: 1px 0 3px; line-height: 23px; font-size: 14px;}
</style> 
</head> 
<body>
 <div id="pn">
 <div id="list0">
 <p class="title">Jackie吉吉</p>
 <p class="time">12月3日 20:49 来自 +niPhone 6s</p>
 <p class="zy">感谢@马路口的YY 今天的款待!一直觉得你们两口子颜值又高人又有趣,又都是高材生,认识你们真的很是很幸运的一件事!~ 终于修成正果了呀~祝福你们新婚快乐白头偕老~ 感谢...<a class="show" href="#">展开全文</a></p>
 <div class="content">感谢@马路口的YY 今天的款待!一直觉得你们两口子颜值又高人又有趣,又都是高材生,认识你们真的很是很幸运的一件事!~ 终于修成正果了呀~祝福你们新婚快乐白头偕老~ 感谢@SNH48-杨韫玉-- 让我们相识[偷乐]以后也一起去看公演呀~ 哪个队都成。
 <a href="#" class="hidd">收起全文</a>
 </div>
 </div>

 <div id="list0">
 <p class="title">高晓松</p>
 <p class="time">44分钟前 来自 微博 weibo.com</p>
 <p class="zy">波澜壮阔的独立斗争,风起云涌的解放运动,卡斯特罗泼墨挥毫一人写就半部古巴史。戴名表开豪车上名校,亲美富二代卡斯特罗早早走上革命之路竟是由基因决定?艳福不浅,老卡又如何能在有生之年睡完传闻中的35000个女人?高晓松用数据还原真实的古巴,看今日...<a class="show" href="#">展开全文</a></p>
 <div class="content">波澜壮阔的独立斗争,风起云涌的解放运动,卡斯特罗泼墨挥毫一人写就半部古巴史。戴名表开豪车上名校,亲美富二代卡斯特罗早早走上革命之路竟是由基因决定?艳福不浅,老卡又如何能在有生之年睡完传闻中的35000个女人?高晓松用数据还原真实的古巴,看今日的它究竟是落后贫穷还是盛世繁华:L晓松奇谈之革命领袖卡斯特罗的传奇一生
 <a href="#" class="hidd">收起全文</a>
 </div>
 </div>
 <div id="list0">
 <p class="title">王尼玛</p>
 <p class="time">12月7日 12:30 来自 微博weibo.com</p>
 <p class="zy">已退役的美国休斯顿德州人橄榄球队的外接手安德烈·约翰逊,为12位由儿童保护服务组织选出的孩子买圣诞节玩具,孩子们可以在80秒内...<a class="show" href="#">展开全文</a></p>
 <div class="content">已退役的美国休斯顿德州人橄榄球队的外接手安德烈·约翰逊,为12位由儿童保护服务组织选出的孩子买圣诞节玩具,孩子们可以在80秒内选择他们喜欢的任何玩具,最终这些玩具花费19144.58美元,慷慨!好了好了别闹了,论飙车还是应该老司机出马!
 <a href="#" class="hidd">收起全文</a>
 </div>
 </div>
 </div>
 <script type="text/javascript"> 
 //在页面加载完后立即执行多个函数方案。
 function addloadEvent(func){
 var oldonload=window.onload;
 if(typeof window.onload !="function"){
  window.onload=func;
 }
 else{
  window.onload=function(){
  if(oldonload){
   oldonload(); 
  }
  func();
  }
 }
 }
 addloadEvent(b);
 //在页面加载完后立即执行多个函数方案结束。
 //获取同级所有元素开始
 function siblings(elm) {
 var a = [];
 var p = elm.parentNode.children;
 for(var i =0,pl= p.length;i<pl;i++){
 if(p[i] !== elm) a.push(p[i]);
 }
 return a;
 }
 //获取同级所有元素结束
 function b(){
 //获取查看全文的a标签
 var show=document.getElementsByClassName("show");
 //遍历a
 for(var i=0;i<show.length;i++){
 show[i].onclick=function(){
 //找到a的父级
 var father=this.parentNode;
 //设置隐藏
 father.style.display="none";
 //找到父级的下一个节点
 var next=father.nextSibling;
 //判断下一个节点的数据类型,如果不是1(元素节点),那就接着往下找
 if(next.nodeType!=1){
 next=next.nextSibling;
 }
 //正文显示
 next.style.display="block";
 //获取整个list0
 var ff=this.parentNode.parentNode;
 //获取除去list0的所有同级元素
 var bro=siblings(ff);
 for(var y=0;y<bro.length;y++){
 //获取每个list0里的第一个content类名
 var w=bro[y].getElementsByClassName("content")[0];
 //获取content类名的前一个节点
 var wt=w.previousSibling;
 //判断前一个节点的数据类型,如果不是1(元素节点),那就接着往上找
 if(wt.nodeType!=1){
 wt=wt.previousSibling;
 }
 //同级摘要部分显示
 wt.style.display="block";
 //同级全文部分隐藏
 w.style.display="none";
 }  
 }
 }
 //下面就是点击收回全文的部分与展开原理一样
 var hidd=document.getElementsByClassName("hidd");
 for(var i=0;i<hidd.length;i++){
 hidd[i].onclick=function(){
 var fafa=this.parentNode;
 fafa.style.display="none";
 var pre=fafa.previousSibling;
 if(pre.nodeType!=1){
 pre=pre.previousSibling;
 }
 pre.style.display="block";
 }
 }
 } 
 </script>
</body> 
</html> 

如上正是本文的全体内容,希望本文的源委对我们的就学可能工作能带动一定的鼎力相助,同不经常间也盼望多多帮衬脚本之家!

你或者感兴趣的篇章:

  • JS仿QQ老铁列表展开、减弱效用(第一篇)
  • JS仿QQ老铁列表张开、减弱功能(第二篇)
  • Javascript通过overflow调节列表闭合与拓展的艺术
  • JavaScript兑现QQ列表展开收缩增加作用

相关文章