js展开闭合效果演示代码

最新推荐文章于 2022-04-13 21:33:02 发布
最新推荐文章于 2022-04-13 21:33:02 发布
阅读量663 收藏
点赞数
分类专栏： Javascript相关 文章标签： 展开 闭合

分享下js实现展开闭合效果的代码。

如下：

<!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=gb2312" />
<title>演示展开闭合效果-www.jbxue.com</title>
<style type="text/css">
table{
border:#0000FF 1px solid;
}
table td{
border:#0033FF 1px solid;
background-color:#6699FF;
}
table td div{
background-color:#FFFF99;
display:none;
}
table td a:link,table td a:visited{
text-decoration:none;
color:#993300;
}
.open{
display:block;
}
.close{
display:none;
}
</style>
<script type="text/javascript">
function list(){
var aNode = event.srcElement;
//alert(aNode.nextSibling.nodeName);//拿下一个兄弟节点容易拿到空文本节点
var tdNode = aNode.parentNode;
var divNode = tdNode.getElementsByTagName("div")[0];
var tabNode = document.getElementsByTagName("table")[0];
var divNodes = tabNode.getElementsByTagName("div");
for(var x = 0;x < divNodes.length;x++){
if(divNodes[x]==divNode){
if(divNode.className=="open"){
divNode.className="close";
}else{
divNode.className="open";
}
}else{
divNodes[x].className="close";
}
}


//alert(divNode.nodeName);


}
</script>
</head>


<body>
<table>
<tr>
<td>
<a href="javascript:void(0)" οnclick="list()">好友菜单列表</a>
<div>
新白发魔女传<br />
新白发魔女传<br />
新白发魔女传<br />
新白发魔女传<br />
新白发魔女传<br />
新白发魔女传<br />
新白发魔女传<br />
新白发魔女传<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" οnclick="list()">好友菜单列表</a>
<div>
新白发魔女传<br />
新白发魔女传<br />
新白发魔女传<br />
新白发魔女传<br />
新白发魔女传<br />
新白发魔女传<br />
新白发魔女传<br />
新白发魔女传<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" οnclick="list()">好友菜单列表</a>
<div>
新白发魔女传<br />
新白发魔女传<br />
新白发魔女传<br />
新白发魔女传<br />
新白发魔女传<br />
新白发魔女传<br />
新白发魔女传<br />
新白发魔女传<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" οnclick="list()">好友菜单列表</a>
<div>
新白发魔女传<br />
新白发魔女传<br />
新白发魔女传<br />
新白发魔女传<br />
新白发魔女传<br />
新白发魔女传<br />
新白发魔女传<br />
新白发魔女传<br />
</div>
</td>
</tr>
</table>
</body>
</html>
my_baby_2009
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Python从0到100（三十三）：xpath和lxml类库
Hello大家好，我是Dream，如果帮得到你，那我深感荣幸！交流学习、商务合作：https://bbs.csdn.net/topics/614347534
07-01 3万+
XPath，全称为XML Path Language，是一种用于在XML文档中进行导航和数据提取的语言，可用来在 HTML\XML 文档中对元素和属性进行遍历。W3School官方文档：http://www.w3school.com.cn/xpath/index.asp。
CSS万能闭合代码
weixin_30387663的博客
08-02 103
给需要闭合的DIV（class为clearfix）加上如下的CSS样式（万能闭合代码）即可： .clearfix:after{content:”.”;display:block;height:0;clear:both;visibility:hidden;} 简化写法： .clear{clear:both;height:0px;overflow:hidden;}> ...
js中封闭函数
dust__的博客
08-01 312
封闭函数: 没有名字,初始化调用 语法结构: (function (){函数执行体}) 作用: 避免名称冲突; 在函数体内部定义的变量以及函数的名称并不会被外部的元素访问或是获取 三种封闭函数的写法: (function (){函数体})(); !function(){}(); ~function(){}(); js中的内置对象: BOM浏览器对象模型 eval(): 用于计算字符串表达式的值 i...
[原创 js] 点击展开关闭效果
weixin_30718391的博客
04-25 212
因为工作中老是需要这个功能，本来也不是很麻烦，就把它写成一个可重用的函数好了。代码很简单。//===========================点击展开关闭效果====================================functionopenShutManager(oSourceObj,oTargetObj,shutAble,oOpenTip,oShutTip){v...
循环内的JavaScript闭合–简单的实际示例
p15097962069的博客
12-02 336
var funcs = []; // let's create 3 functions for (var i = 0; i < 3; i++) { // and store the
Javascript通过overflow控制列表闭合与展开的方法
10-24
DisplayList()">球星列表5</dt> 罗纳尔多</dd> 贝克汉姆</dd> 齐达内</dd> 内马尔</dd> 巴蒂斯图塔</dd> 梅西</dd></dl></div></body>上述代码展示了一个使用JavaScript和CSS通过`overflow`属性控制列表闭合与展开的...
前端高级之路：写一个高逼格可视化“圆环”
前端交流群:954854084
09-28 4141
日常生产生活中，我们会经常读到或使用各种类型的图表。圆环（圆弧）便是一种较常见的类型，用于直观展现某一数据指标占整体的比例。本文以 HTML Canvas 的实现为主（当然，SVG 党可以在了解原理后自行实现），逐层介绍圆环图表开发的一些主要思路和原理。 图1 所示是一些我们平时比较常见的一些圆环（圆弧）效果。虽然图形的主体构成都是圆弧，但不同效果在信息传达的功能上却略有差异。如： 闭合的圆环可以表示流程 “进度” 的概念非闭合圆环一般用于状态量（标量）的展示，一般也称为 “仪表盘” 效果不同的色相可用.
页面展开收起php代码,纯CSS3实现移动端展开和收起效果的示例代码
weixin_33433927的博客
03-25 246
本文介绍了纯CSS3实现移动端展开和收起效果的示例代码，分享给大家，具体如下：展示效果：HTML代码展开收起唧唧复唧唧，木兰当户织。不闻机杼声，惟闻女叹息。(惟闻 通：唯)问女何所思，问女何所忆。女亦无所思，女亦无所忆。昨夜见军帖，可汗大点兵，军书十二卷，卷卷有爷名。阿爷无大儿，木兰无长兄，愿为市鞍马，从此替爷征。(惟闻通：唯)东市买骏马，西市买鞍鞯，南市买辔头，北市买长鞭。旦辞爷娘去，暮宿黄河边...
JS 第四天学习(无参函数、带return函数、闭合函数、作用域、函数封装）)
JS_xwz的博客
04-13 492
JavaScript传参函数和无参函数 1.无参函数 function func() { console.log("无参函数") } var func2 = function () { console.log("无参函数2") } 2.传参函数 f(x)=x+1 // 参数：调用方法(函数)时，根据传入的参数的不同，而返回不同的结果。 // x：形参 形式上的参数 变量名 function func3(x)
js闭合例子
伯恩大帝的博客
07-19 643
var BaseConfig = { Const: { "STUDY_TIME":10 }, MediumType:{ ".jpg|.gif|.png|.jpeg":"图片", ".doc|.docx|.xls|.xlsx|.ppt|.pptx|.pdf":"文档", ".wmv|.asf|.flv|.mp4|.
JS的闭合（Closure）
ting2909的博客
08-12 448
实例 复制代码 function foo() { let test1 = ‘变量1’ const test2 = ‘变量2’ let test3 = ‘变量3’ var innerBar = { getName: function () { console.log(test1) return test2 }, } return innerBar } var bar = foo() bar.getName() 复制代码 我们可以通过控制台的Source中的scope看到闭包 image.png 右边 Scop
JS封闭函数（总结）
qq_44858151的博客
08-01 827
封闭函数 1，封闭函数是什么？ 封闭函数：没有名字初始化的调用。()是用来显示调用的 2，封闭函数的语法结构： （function(){函数执行体})() 3，封闭函数的作用： （1）避免名称冲突 （2）在函数体内部定义的变量以及函数名称并不会被外部的元素，访问或是获取 4，三种封闭函数的写法： （1）（function(){函数执行体})() （2）!function(){}() (3)~fun...
列表展开隐藏php代码,jQuery制作js下拉收缩、js展开收起、js显示隐藏效果
weixin_39530509的博客
03-19 156
jquery基础教程--jQuery制作js下拉收缩、js展开收起、js显示隐藏效果！废话不多说了先上效果图 素材图片下拉上下图标下载 下面切入正题先引入jquery.js框架就不说了然后写html代码点击试试就2段代码一个内容区域#panel一个是下拉.slide下面是css代码body { margin: 0 auto; padding: 0; width: 570px; font: 75%/...
js实现折叠&展开
jia_love的博客
08-31 9763
最近在做一个div的折叠与展开功能，在网上搜了多种方法，各有各的功能，但个人觉得有一种方法比较简洁明了，因此来总结一下—— 比较关键的是一段js代码，如下： $(document).ready(function(){ var i=$('#num').text(); $(".btn-slide1").click(function(){ $("#panel1").
【DOM】展开闭合列表示例
你今天真好看呀
08-31 350
1.标签封装数据 2.定义样式 3.明确事件源和事件 4.明确具体的操作方式，就是事件的处理内容 <html> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> /*为dl下面的dd标签设置...
MATLAB闭合线形的代码
最新发布
05-04
MATLAB 中可以使用polyline函数绘制闭合线形。polyline函数可以接收多个点的坐标，将它们连接起来形成一条线段。为了形成闭合线形，需要在起点和终点处再添加一个相同的点。以下是一个示例代码： ```matlab % 定义...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值