威尼斯www.9778.com-威尼斯正版官方网站

jquery实现点击展开列表同时隐藏其他列表_jquery_脚本之家

日期:2020-01-03编辑作者:服务器&运维

本文实例呈报了jquery达成点击打开列表相同的时候掩盖其余列表。分享给大家供我们参考。具体如下:

原生js实现新闻列表张开/收起全文作用,js音信列表

文化要点

1.落到实处原理很简短,通过点击a标签设置div的display属性遮盖或许显示,

驷不及舌是对dom操作的支配。

2.索要利用的dom操作:

parentNode 获取父级成分

nextSibling获得下叁个紧跟的节点

previousSibling获取上一个紧跟的节点

3.注意事项:

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

当用nextSibling获取下叁个节点时候,差异浏览器的论断是差别等的

无数获取成分,有的得到换行符或许空格,所以这里将在动用nodeType来判定一下数据类型nodeType只回去数字1、2、3

独有再次回到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> 

上述正是本文的全部内容,希望本文的内容对大家的就学恐怕办事能带给一定的帮助,同期也期待多多支持帮客之家!

知识要点 1.贯彻原理很简短,通过点击a标签设置div的display属性隐蔽或许展现, 首假若...

jquery落成鼠标点击后张开列表内容的导航栏效果,jquery导航栏

正文实例陈述了jquery达成鼠标点击后实行列表内容的导航栏效果。分享给大家供大家参谋。具体如下:

那是后生可畏款基于jQuery达成的导航栏,鼠标点击后打开遮掩的列表内容,用来创设一个索引是最合适可是的挑精拣肥。本例是犀利的jQeury中的叁个实例,那是最后的优化版本,宽容性还示曾测验,在火狐的变现尚不知情,风乐趣的相恋的人可测量试验或改善。

运维效果截图如下:

图片 1

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>jquery导航栏</title>
<style type="text/css">
#menu { 
 width:300px; 
}
.has_children{
 background : #555;
 color :#fff;
 cursor:pointer;
}
.highlight{
 color : #fff;
 background : green;
}
div{
 padding:0;
}
div a{
 background : #888;
 display : none;
 float:left;
 width:300px;
}
</style>
<!-- 引入 jQuery -->
<script src="jquery1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加载完毕.
$(document).ready(function(){
 $(".has_children").click(function(){
  $(this).addClass("highlight")//为当前元素增加highlight类
   .children("a").show().end()//将子节点的a元素显示出来并重新定位到上次操作的元素
  .siblings().removeClass("highlight")//获取元素的兄弟元素,并去掉他们的highlight类
   .children("a").hide();//将兄弟元素下的a元素隐藏
 });
});
</script>
</head>
<body>
<div id="menu">
 <div class="has_children">
  第1章-认识jQuery
  <a>1.1-JavaScript和JavaScript库</a>
  <a>1.2-加入jQuery</a>
  <a>1.3-编写简单jQuery代码</a>
 </div>
 <div class="has_children">
  第2章-jQuery选择器
  <a>2.1-jQuery选择器是什么</a>
  <a>2.2-jQuery选择器的优势</a>
  <a>2.3-jQuery选择器</a>
  <a>2.4-应用jQuery改写示例</a>
 </div>
 <div class="has_children">
  第3章-jQuery中的DOM操作
  <a>3.1-DOM操作的分类</a>
  <a>3.2-jQuery中的DOM操作</a>
 </div>
</div>
</body>
</html>

期望本文所述对我们的jQuery程序设计有着援救。

本文实例陈述了jquery完成鼠标点击后举办列表内容的导航栏效果。分享给大家...

这里运用jquery实现张开、掩瞒特效,点击列表标题后该项内容实行,别的项缩小起来,也正是不显得了。个人喜好了,有的向往在私下认可状态下不出示任何选项的内容,这几个正是这种情景,仅供参照他事他说加以考查吧。

js点击展开列表// &#25910;&#32553;&#23637;&#24320;&#25928;&#26524;$.ready.click.children.slideToggle.siblings.children;.box{width:200px; margin:0 auto; background:#CCC;}.text{display:none;} 对ASP擅长的程序 论坛类和文章类  对PHP擅长的程序 博客类和新闻类  对前端擅长的插件 jquery 

意在本文所述对大家的jquery程序设计有着援救。

本文由威尼斯www.9778.com发布于服务器&运维,转载请注明出处:jquery实现点击展开列表同时隐藏其他列表_jquery_脚本之家

关键词:

JavaScript中伪协议 javascript:使用探讨_javascript技巧_脚本之家

废话不多说,先上个效果图: 将javascript代码添加到客户端的方法是把它放置在伪协议说明符javascript:后的URL中。这个...

详细>>

jquery表单插件Autotab使用方法详解,jqueryautotab

jQuery过滤器插件fastLiveFilter//jquery.fastLiveFilter.jsjQuery.fn.fastLiveFilter = function { options = options || {}; list = jQuery; var input = ...

详细>>

javascript弹出拖动窗口_javascript技巧_脚本之家

以上是本文实现javascript弹出拖动窗口的全部内容,希望对大家有所帮助。 您可能感兴趣的文章: javascript div 弹出可拖...

详细>>

jQuery中remove方法用法实例_jquery_脚本之家

remove(State of Qatar方法的定义和用法: 本文实例陈述了jQuery中remove(卡塔尔方法用法。分享给我们供我们参谋。具体解析...

详细>>