js tree树形折叠菜单效果

最新推荐文章于 2024-04-16 16:26:25 发布
最新推荐文章于 2024-04-16 16:26:25 发布
阅读量6.3k 收藏 2
点赞数
文章标签： tree url 网络 音乐 function class
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JSON Tree</title>
<style>
a { color:#003366; }
a:hover { color:#060; text-decoration:underline; }
a:active { color:#C30;  }
.jsonTree { font: 12px/1.75 'Microsoft Yahei', Tahoma, Arial, Helvetica, STHeiti; _font-family:Tahoma,Arial,Helvetica,STHeiti; -o-font-family: Tahoma, Arial; }
.jsonTree a { text-decoration:none; }
.jsonTree dl { padding:0; margin:0; }
.jsonTree dt { cursor:pointer; padding:0 3px; height:2em; line-height:2em; border-radius:5px; }
.jsonTree dd { margin:0; }
.jsonTree dl dd { padding-left:0.5em; border-left:1px dotted #EEE; margin-left:6px; }
.jsonTree dl dd a { display:block; padding:3px; border-radius:5px; }
.jsonTree dt:hover, .jsonTree dl dd a:hover { background:#D5E2FF; }
.jsonTree-icon { margin-right:3px; display:inline-block; *display:inline; *zoom:1; width:9px; height:9px; vertical-align:middle; }
.jsonTree-show dd { display:block; }
.jsonTree-hide dd { display:none; }
.jsonTree-show > dt { font-weight:bold; color:#060; }
.jsonTree-show .jsonTree-icon { background:url(http://bbs.blueidea.com/attachment.php?aid=165232&k=d8f4eb539f2cbdb908f3d3677636265a&t=1307192054¬humb=yes) no-repeat -9px 0; }
.jsonTree-hide .jsonTree-icon { background:url(http://bbs.blueidea.com/attachment.php?aid=165232&k=d8f4eb539f2cbdb908f3d3677636265a&t=1307192054¬humb=yes) no-repeat 0 0; }
.jsonTree-number { display:inline-block; *display:inline; *zoom:1; min-width:1.5em; _width:1.5em; text-align:right; color:#CCC; }
.jsonTree a:hover .jsonTree-name { text-decoration:underline; }
.jsonTree a:hover .jsonTree-number { color:#666; }
</style>
<script>
var jsonTree = function (wrap, obj) {
if (typeof wrap === 'string') wrap = document.getElementById(wrap);
wrap.innerHTML = jsonTree.html(obj);
jsonTree.event(wrap);
};
// 生成UI
jsonTree.html = function (obj) {
var html = [], i, length,
toString = Object.prototype.toString,
isArray = function (obj) {
return toString.call(obj) === '[object Array]';
};

var each = function (obj, parent) {
if (isArray(obj)) {
length = obj.length;
for (i = 0; i < length; i ++) {
html.push('<dd><a href="');
html.push(obj[i]['url']);
html.push('"><span class="jsonTree-number">');
html.push(i + 1);
html.push('.</span> <span class="jsonTree-name">');
html.push(obj[i]['name']);
html.push('</span></a></dd>');
};
} else if (typeof obj === 'object') {
for (i in obj) {
html.push('<dd><dl class="jsonTree-hide"><dt><span class="jsonTree-icon"></span>');
html.push(i);
html.push('</dt>');
html.push(each(obj[i], i));
html.push('</dl></dd>');
};
};
return html;
};

return '<dl class="jsonTree">' + each(obj).join('') + '</dl>';
};
// 绑定行为
jsonTree.event = function (wrap) {
wrap.onclick = function (event) {
event = event || window.event;
var link, bar,
target = event.target || event.srcElement,
parentNode = target.parentNode;

if (target.nodeName === 'DT') bar = target;
if (target.nodeName === 'A') link = target;
if (parentNode.nodeName === 'DT') bar = parentNode;
if (parentNode.nodeName ===  'A') link = parentNode;

if (bar) {
bar.parentNode.className = bar.parentNode.className === 'jsonTree-show' ?
'jsonTree-hide' :
'jsonTree-show';
} else if (link) {
// [code..]
};

try {
'getSelection' in window ?
window.getSelection().removeAllRanges() :
document.selection.empty();
} catch (e) {};
};
};
</script>
</head>
<body>
<h1>小巧的无限级JSON树演示</h1>
<div id="demo" style="width:320px"></div>
<script>
var _data = {
"网络电台": [{
"name": "CRI 都市流行频道",
"url": "/pop"
}, {
"name": "CRI 怀旧金曲频道",
"url": "/oldies"
}, {
"name": "CRI 乡村民谣频道",
"url": "/country"
}, {
"name": "CRI 巅峰体坛网络电台",
"url": "/sports"
}, {
"name": "银河网络广播star radio",
"url": "mms://cdnmms.cnr.cn/cnr014"
}, {
"name": "银河网络广播news radio",
"url": "mms://cdnmms.cnr.cn/cnr010"
}, {
"name": "傲游之声",
"url": "/mtradio"
}, {
"name": "QQ-欢乐派对",
"url": "/qqradio?qqradio"
}, {
"name": "QQ-音乐休闲",
"url": "/music?qqradio"
}, {
"name": "QQ-秀radio",
"url": "/daren?qqradio"
}, {
"name": "QQ-怀旧金曲",
"url": "oldies?qqradio"
}, {
"name": "QQ-幽默相声",
"url": "/humor?qqradio"
}, {
"name": "华语之声综合频道",
"url": "hy960"
}, {
"name": "华语之声新青年频道",
"url": "http://www.hy960xiasha.com/play/list2.asx"
}, {
"name": "城市之音(CITY FM)联播网",
"url": "mms://media.sdgb.cn/yinyue"
}, {
"name": "青檬网络电台",
"url": "mms://pub1.qmoon.net/911pop"
}, {
"name": "西湖之声网络电台",
"url": "mms://live.hcrt.cn/1054test"
}, {
"name": "萤火虫网络电台",
"url": "rtsp://www.52yhc.com/playlist/yhcradio.smil"
}, {
"name": "澳洲CVC-中文广播",
"url": "http://chinese64mp3.serverroom.us:7906"
}, {
"name": "澳洲CVC-中文广播(24K)",
"url": "http://chinese24mp3.serverroom.us:8146"
}, {
"name": "CVC-english",
"url": "/play/cvc_int_english"
}, {
"name": "EBC5网络电台",
"url": "http://www.ebc5.com/live/ebc5.asx"
}, {
"name": "YYRadio流行音乐网络电台",
"url": "mms://222.215.119.20:8089/radio"
}, {
"name": "灵通电台第三套节目",
"url": "rtsp://am100ip.am100.cn/am100/b3.rm"
}, {
"name": "灵通电台第四套节目",
"url": "rtsp://am100ip.am100.cn/am100/b4.rm"
}, {
"name": "灵通电台第五套节目",
"url": "rtsp://am100ip.am100.cn/am100/b5.rm"
}, {
"name": "J2H网络电台",
"url": "http://radio.sonicnet.com/playlists/rpmprof.asp?C=HIGH"
}, {
"name": "东广音乐FM1978",
"url": "mms://fm1978.com/radio"
}, {
"name": "巧巧网络电台",
"url": "mms://218.66.104.104/radio2/audio"
}, {
"name": "华声公益网络电台",
"url": "mms://radio.hsgy.org/live1"
}, {
"name": "广东青少年网络电台",
"url": "mms://live.teamnet.cc/live"
}, {
"name": "一听音乐网络电台",
"url": "mms://online-radio.1ting.com/music"
}, {
"name": "中国音乐网络电台",
"url": "mms://www.591radio.com/radio"
}, {
"name": "绿城网络电台",
"url": "mms://radio.nn.gx.cn/voice"
}, {
"name": "摩力游电台",
"url": "mms://203.156.255.24:5556/moliyo"
}, {
"name": "一加一网络广播",
"url": "/opotemp/opolive.asx"
}, {
"name": "海底城堡网络电台",
"url": "mms://radio.mx8087.cn/tingmx"
}, {
"name": "神秘岛网络电台",
"url": "http://www.jinlaima.com:8000"
}, {
"name": "Oporadio",
"url": "/opotemp/opolive.asx"
}],
"推荐电台": [{
"name": "CRI 怀旧金曲频道",
"url": "/oldies"
}, {
"name": "CRI 都市流行频道",
"url": "/pop"
}, {
"name": "上海动感101",
"url": "mms://diantai.smgbb.cn/dg101"
}, {
"name": "广东电台音乐之声",
"url": "mms://live.rgd.com.cn/993"
}, {
"name": "佛山电台真爱频道",
"url": "mms://59.38.110.93/fm946"
}, {
"name": "香港电台第二台",
"url": "mms://202.177.192.111/radio2"
}, {
"name": "无锡电台音乐频率",
"url": "mms://vs1.thmz.com/radio31"
}, {
"name": "山东广播音乐频道",
"url": "http://60.216.51.155:8001/channel6"
}, {
"name": "福建音乐广播",
"url": "mms://video.fjtv.net/yygb?ZHVob25n"
}, {
"name": "银河流行音乐台",
"url": "mms://media.iwant-in.net/pop"
}, {
"name": "湖南电台文艺频道",
"url": "mms://202.103.67.185/文艺"
}, {
"name": "Radio Love Live (32k)",
"url": "/radiolovelive/feed/windowsmedia.asx"
}, {
"name": "Classical Minnesota Public Radio (64k)",
"url": "/tools/play/streams/classical.asx"
}, {
"name": "Whisperings: Solo Piano Radio (64k)",
"url": "/free/pianosolo64wma.asx"
}, {
"name": "ORS Radio -- Latin instrumental classical (128k)",
"url": "http://www.orsradio.com/bluefm.asx"
}, {
"name": "东方都市 （FM89.9 AM792）",
"url": "mms://diantai.smgbb.cn/ds792"
}],
"国外": {
"华语广播": [{
"name": "美国之音(VOA) 中文",
"url": "rtsp://a1641.l211023640.c2110.g.lr.akamaistream.net:554/live/D/1641/2110/v0001/reflector:23640"
}, {
"name": "BBC 中文广播",
"url": "mms://livewmstream-ws.bbc.co.uk.edgestreams.net/reflector:38962"
}, {
"name": "BBNRadio 中文台",
"url": "/wcm4/schinese/chineseaudio2.asx"
}, {
"name": "动力883Jia FM华语电台",
"url": "http://www.zhutiai.com"
}, {
"name": "温哥华AM1470（粤语）",
"url": "/liveam.asx"
}, {
"name": "新西兰BBC 时事一周(粤)",
"url": "http://www.zhutiai.com"
}, {
"name": "KMRB AM1430 华语广播电台",
"url": "mms://38.96.148.89/kmrb"
}, {
"name": "KAZN  AM1300 华语广播电台",
"url": "mms://38.96.148.89/kazn"
}, {
"name": "KCHN  AM1050 华语广播电台",
"url": "mms://barryp.serverroom.us/barryp"
}, {
"name": "KDFT  AM540 华语广播电台",
"url": "http://kdft.serverroom.us/KDFT"
}, {
"name": "WKDM  AM1380 华语广播电台",
"url": "mms://38.96.148.29/wkdm"
}, {
"name": "WNSW  AM1430 华语广播电台",
"url": "mms://38.96.148.29/wnsw"
}, {
"name": "WNTD  AM950 华语广播电台",
"url": "mms://65.123.67.235:8080/"
}, {
"name": "WZRC  AM1480 华语广播电台",
"url": "mms://38.96.148.29/wzrc"
}, {
"name": "RFI Chinese 06:00-07:30",
"url": "http://fifm.cn/live/1647.asx"
}, {
"name": "RFI Chinese 07:00-08:00",
"url": "http://fifm.cn/live/1649.asx"
}, {
"name": "RFI Chinese 17:30-18:30",
"url": "http://fifm.cn/live/1669.asx"
}, {
"name": "KBS韩国国际广播电台",
"url": "http://rki.kbs.co.kr/src/asx/L_RKI.asx"
}, {
"name": "德国之声晨间节目",
"url": "mms://c13010-oa.w.core.cdn.streamfarm.net/dwworldondemand1/encoder/audio/mitschnitt/Kanal5-chi-abe.wmv"
}, {
"name": "德国之声晚间第一次节目",
"url": "mms://c13010-oa.w.core.cdn.streamfarm.net/dwworldondemand1/encoder/audio/mitschnitt/Kanal2-chi-fru.wmv"
}, {
"name": "德国之声晚间第二次节目",
"url": "mms://c13010-oa.w.core.cdn.streamfarm.net/dwworldondemand1/encoder/audio/mitschnitt/Kanal2-chi-nac.wmv"
}, {
"name": "洛城双语广播电台KWRM AM1370",
"url": "http://www.am1370-chinese.com/2001/radio_pg10/asx/1370AMRadio.asx"
}, {
"name": "纽约中华商台广播",
"url": "mms://nick11f.surfernetwork.com/cwcb"
}, {
"name": "澳洲CVC-中文广播",
"url": "http://chinese64mp3.serverroom.us:7906"
}],
"美国": {
"华语": [{
"name": "BBNRadio 中文台",
"url": "http://www.bbnradio.org/wcm4/schinese/chineseaudio2.asx"
}, {
"name": "KMRB AM1430 华语广播电台",
"url": "mms://38.96.148.89/kmrb"
}, {
"name": "KAZN  AM1300 华语广播电台",
"url": "mms://38.96.148.89/kazn"
}, {
"name": "KCHN  AM1050 华语广播电台",
"url": "mms://barryp.serverroom.us/barryp"
}, {
"name": "KDFT  AM540 华语广播电台",
"url": "http://kdft.serverroom.us/KDFT"
}, {
"name": "WKDM  AM1380 华语广播电台",
"url": "mms://38.96.148.29/wkdm"
}, {
"name": "WNSW  AM1430 华语广播电台",
"url": "mms://38.96.148.29/wnsw"
}, {
"name": "WNTD  AM950 华语广播电台",
"url": "mms://65.123.67.235:8080/"
}, {
"name": "WZRC  AM1480 华语广播电台",
"url": "mms://38.96.148.29/wzrc"
}, {
"name": "洛城双语广播电台KWRM AM1370",
"url": "http://www.am1370-chinese.com/2001/radio_pg10/asx/1370AMRadio.asx"
}, {
"name": "美国之音(VOA) 中文",
"url": "rtsp://a1641.l211023640.c2110.g.lr.akamaistream.net:554/live/D/1641/2110/v0001/reflector:23640"
}, {
"name": "纽约中华商台广播",
"url": "mms://nick11f.surfernetwork.com/cwcb"
}, {
"name": "纽约公共广播(NYPR)",
"url": "http://205.234.168.46:80/wnycam?MSWMExt=.asf"
}],
"精选": [{
"name": "CNN News",
"url": "mms://wmscnn.stream.aol.com/live%5Ccnn%5Ccnn_radio"
}, {
"name": "CNN Radio",
"url": "http://www.cnn.com/audio/radio/liveaudio.asx"
}, {
"name": "Family Life Ministries Network",
"url": "http://www.christiannetcast.com/listen/dynamicasx.asp?station=fln-32"
}, {
"name": "IPR  News Radio 91.5 FM",
"url": "mms://pubint-wica.wm.llnwd.net/pubint_wica"
}, {
"name": "IPR Music Radio 88.7&100.9 FM Classical",
"url": "mms://pubint-wiaa.wm.llnwd.net/pubint_wiaa"
}, {
"name": "NPR Naional Public Radio",
"url": "http://scfire-dll-aa04.stream.aol.com:80/stream/1062"
}, {
"name": "Research Channel",
"url": "mms://media-wm.cac.washington.edu/ResearchTV Live (LAN)"
}, {
"name": "VOA News Now",
"url": "rtsp://a247.r.akareal.net/live/D/247/2110/v001/reflector:48984"
}, {
"name": "VOA Talk To America",
"url": "rtsp://a399.l211048984.c2110.g.lr.akamaistream.net/live/D/399/2110/v0001/reflector:48984"
}]
}
}
};
jsonTree('demo', _data);
</script>
</body>

</html>



lanchengxiaoxiao
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js 树形菜单的折叠收缩
12-03
js 树形菜单的折叠收缩
2022-06-11 jQuery案例:树状菜单(以树状结构展开和折叠的菜单和其子菜单)
GAARA
06-11 533
思路 1.ul>li前的"+“,”-"号使用伪元素选择器::before{}添加,如在正式网页中,可以用iconfont图标,达到更好的视觉效果 2.点击展开和折叠不用display:block和none,而是用slideToggle(),效果更好 3.为ul>li绑定点击事件后,点击一个li就让其子元素ol展开和折叠,若只允许展开一个li,则让当前li的所有表兄弟都向上折叠即可
一键展开或折叠树形表格
最新发布
m0_51181022的博客
04-16 853
的属性表格每次点击只能展开或折叠当前行，当数据量多或者表格层级比较多的情况下，我们就需要引入一键展开或者折叠所有行的这么一个功能。属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。在表格中单列一列（最左列），通过自定义表头的方式，显示展开折叠图表。现有一个树形表格，需要在表头配置一个折叠展开按钮，点击可以将所有的行折叠或者展开。中，如果树型表格的深度较深，可以采用递归的方法去遍历表格，添加。方法，展开全部的话，遍历当前表格的所有行，将。
实用js+css多级树形展开效果导航菜单
06-15
js+css制作折叠展开的多级树形导航菜单，带多选框效果，经典实用。已经用在程序里了。资源来自：http://www.zzjs.net/html/2105.html
可折叠树形菜单代码（带搜索功能）
01-09
jQuery折叠树形菜单代码基于jquery.1.10.2.min.js制作，带搜索功能，搜索关键字，直接显示菜单项，展开收缩树形菜单。
用Vue.js递归组件构建一个可折叠的树形菜单
weixin_30381317的博客
12-24 708
在Vue.js中一个递归组件调用的是其本身，如： Vue.component('recursive-component', { template: `<!--Invoking myself!--> <recursive-component></recursive-component>` });...
Js操作树节点自动折叠展开
Shaniya
04-23 4547
<% String processId=request.getParameter("processId"); %> 文件全景图 {collapsible:true,split:true,animFloat:false,autoHide:false,useSplitTips:true,bodyStyle:'padding:0px;'}
Vue.js组件tree实现无限级树形菜单
10-20
本示例提供了一种使用组件tree实现无限级树形菜单的方法，它基于Vue.js的数据绑定和模板语法，结合HTML的`<ul>`和`<li>`标签来构建可折叠的树结构。 首先，我们看到HTML部分，`<div class="tree">`内包含一个`<nav>...
javascript制作 树形菜单.zip
03-20
在JavaScript编程中，树形菜单是一种常见的用户界面元素，它以层级结构展示数据，通常用于网站导航、文件系统浏览或数据库记录的展示。本压缩包包含两个文件："可以拖动的IEtree树型.htm" 和 "树型结构_lj不错.htm"...
jsTree树形菜单
07-17
**jsTree树形菜单详解** jsTree是一款基于JavaScript的开源库，用于在Web页面中创建交互式的树形结构。它提供了丰富的API、多种主题和插件，使得开发者能够轻松地构建自定义的树形菜单。jsTree适用于各种场景，如...
layui树形下拉菜单完整实例
10-31
在本文中，我们将深入探讨如何使用layui框架中的tree模块创建一个功能完备的树形下拉菜单。layui是一款轻量级的前端UI框架，它提供了丰富的组件和API，使得开发者能够快速构建美观且响应式的Web应用。在“layui树形...
纯JQ+CSS漂亮的折叠树形目录菜单
02-27
纯JQ+CSS漂亮的折叠树形目录菜单，简单实用，弄了半天才弄好的，分享给大家！
jQuery多级折叠菜单
06-13
jQuery多级折叠菜单，有例子
jQuery多级树形分类折叠菜单.zip
05-24
jQuery多级树形分类折叠菜单基于jquery-1.7.2.min.js制作，json树形菜单。
精美Swing 折叠菜单
11-26
精美的Java Swing折叠菜单，完全模仿window xp左边的折叠菜单做的，拥有超炫动态效果，值得珍藏！ 解压后，在eclipse里面编译后直接运行FolderPaneDemo类。
jQuery多级折叠展开树形菜单代码
01-23
jQuery多级折叠展开树形菜单代码是一款简单实用的树形结构菜单插件，数据封装在data.js里面，直接修改调用即可。
JS Tree树形菜单 带节点连接线.rar
07-10
JS Tree树形菜单，确实是够经典的WEB版树形菜单特效，带有节点连接线的树状折叠菜单，点击的时候会展开子菜单，适合用于WEB版的信息管理系统、CMS后台系统中，你喜欢的话，你可以用在任意你想要的地方。
jquery 树形折叠菜单
weixin_34375054的博客
06-11 409
<style type="text/css"> *{ padding:0; margin:0; border:0;} ul,li{ list-style:none;} body{ width:1000px; margin:6px auto; font-size:13px; line-height:18px;} #typebox{wi...
纯CSS打造可折叠树状菜单
张波的技术积累
08-11 2404
1：Html代码 下级 下级 下级 无限级 无限级 无限级 无限级 无限级 无限级 实现的思路是运用checkbox的checked值来判断下级栏目是否展开，CSS3的选择器中提供了:checked 这个伪类，这个伪类提供我们，当元素拥有checke
js tree - 树形菜单插件
10-29
Js tree是一款强大的树形菜单插件。它基于JavaScript开发，可以帮助我们轻松地创建和管理树状结构的菜单。这个插件提供了丰富的功能和选项，可以满足不同项目的需求。 首先，Js tree具有良好的扩展性，允许我们根据...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值