jsp树形菜单完整代码及截图
JS实现的树形菜单
<HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=gb2312"><TITLE>树形菜单</TITLE><STYLE type="text/css">DIV {FONT-SIZE: 13px;COLOR: #000000;LINE-HEIGHT: 22px;}A {FONT-SIZE: 13px;COLOR: #000000;TEXT-DECORA TION: none}A:hover {FONT-SIZE: 13px;COLOR: #999999}</STYLE><SCRIPT language="JavaScript">function show(d1) {if (document.getElementById(d1).style.display == 'none') {document.getElementById(d1).style.display = 'block'; //如果触动的层如果处于隐藏状态，即显示} else {document.getElementById(d1).style.display = 'none'; //如果触动的层如果处于显示状态，即隐藏}}</SCRIPT></HEAD><BODY><DIV HEIGHT="30"><FONT color="#CC0000"><B><IMG src="../image/fold.gif"width="16" height="16" >树形菜单：</B></FONT></DIV><A href="javascript:onClick=show('1') "><IMGsrc="../image/fclose.gif" width="16" height="18" border="0">文学艺术</A><DIV id="1" style="display: none"><IMG src="../image/doc.gif" align="absmiddle">努力工作<BR><IMG src="../image/doc.gif" align="absmiddle">小说散文<BR><IMG src="../image/doc.gif" align="absmiddle">诗风词韵</DIV><DIV><A href="javascript: onClick=show('2') "><IMGsrc="../image/fclose.gif" width="16" height="18" border="0" align="absmiddle">贴图专区</A> </DIV><DIV id="2" style="display: none"><IMG src="../image/doc.gif" align="absmiddle">真我风采<BR><IMG src="../image/doc.gif" align="absmiddle">视频贴图<BR><IMG src="../image/doc.gif" align="absmiddle">行行摄摄<BR><IMG src="../image/doc.gif" align="absmiddle">Flash贴图</DIV></BODY></HTML>。
JavaScript源程序--树形菜单
<a href='#' target='_target'> <IMG SRC='blank.gif' BORDER=0>显示登陆时间</a><br>
}
.STYLE5 {
font-family: "幼圆";
font-size: 20px;
color: #000099;
}
.STYLE6 {
font-family: "华文中宋";
font-size: 20px;
color: #000000;
}
.STYLE7 {
font-family: "华文新魏";
<a href='#' target='_target'> <IMG SRC='blank.gif' BORDER=0>文本静止不动</a><br>
<a href='#' target='_target'> <IMG SRC='blank.gif' BORDER=0>信息框显示链接</a><br>
<a href='#' target='_target'> <IMG SRC='blank.gif' BORDER=0>静止导航菜单</a><br>
js构造树形菜单
js构造树形菜单先上个效果图获取到的数据是这样的[{ id: 1, text: '⼀级菜单A', parentId: null },{ id: 2, text: '⼀级菜单B', parentId: null },{ id: 3, text: '⼀级菜单C', parentId: null },{ id: 4, text: '⼆级菜单AA', parentId: 1 },{ id: 5, text: '⼆级菜单AB', parentId: 1 },{ id: 6, text: '⼆级菜单AC', parentId: 1 },{ id: 7, text: '⼆级菜单BA', parentId: 2 },{ id: 8, text: '⼆级菜单BB', parentId: 2 },{ id: 9, text: '⼆级菜单BC', parentId: 2 },{ id: 10, text: '⼆级菜单CA', parentId: 3 },{ id: 11, text: '⼆级菜单CB', parentId: 3 },{ id: 12, text: '⼆级菜单CC', parentId: 3 },{ id: 13, text: '三级菜单AAA', parentId: 4 },{ id: 14, text: '三级菜单BAA', parentId: 7 },{ id: 15, text: '三级菜单CAA', parentId: 10 }]那如何将这些数据转化为树状结构并渲染出来先上完整代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>ul,li {list-style: none;}</style></head><body><div class="nav"></div></body><script>// 数据let navData = [{ id: 1, text: '⼀级菜单A', parentId: null },{ id: 2, text: '⼀级菜单B', parentId: null },{ id: 3, text: '⼀级菜单C', parentId: null },{ id: 4, text: '⼆级菜单AA', parentId: 1 },{ id: 5, text: '⼆级菜单AB', parentId: 1 },{ id: 6, text: '⼆级菜单AC', parentId: 1 },{ id: 7, text: '⼆级菜单BA', parentId: 2 },{ id: 8, text: '⼆级菜单BB', parentId: 2 },{ id: 9, text: '⼆级菜单BC', parentId: 2 },{ id: 10, text: '⼆级菜单CA', parentId: 3 },{ id: 11, text: '⼆级菜单CB', parentId: 3 },{ id: 12, text: '⼆级菜单CC', parentId: 3 },{ id: 13, text: '三级菜单AAA', parentId: 4 },{ id: 14, text: '三级菜单BAA', parentId: 7 },{ id: 15, text: '三级菜单CAA', parentId: 10 }];// let nav = document.getElementsByClassName('nav')let nav = document.querySelector('.nav')// 将数组置为树形let treeee = (function makeTreeData(arr, parentId) {let temp = []for (let i = 0; i < arr.length; i++) {if (arr[i].parentId === parentId) {temp.push(arr[i])arr[i].children = makeTreeData(navData, arr[i].id)}}return temp})(navData, null)console.log(treeee);// 创造dom树(function makeDomTree(data, node) {let ulfor (let i = 0; i < data.length; i++) {ul = document.createElement('ul')let li = document.createElement('li')li.innerHTML = data[i].textnode.appendChild(ul)ul.appendChild(li)if (data[i].children.length !== 0) {let element = makeDomTree(data[i].children, ul)ul.appendChild(element)}}return ul})(treeee, nav)</script></html>分为两步解析第⼀步将数据进⾏转化需要将数据转化为如下格式[{ id: 1,text: '⼀级菜单A',parentId: null ,children:[{ id: 4, text: '⼆级菜单AA', parentId: 1 ,children[{ id: 13, text: '三级菜单AAA', parentId: 4,children:[] }]},{ id: 5, text: '⼆级菜单AB', parentId: 1 ,children[]},{ id: 6, text: '⼆级菜单AC', parentId: 1 ,children[]}]},...]也就是说可以利⽤children属性让我们很清楚的看到，每个菜单的⼦菜单有多少项并包含着每项⼦菜单的每个属性代码时这样⼦的，利⽤递归算法直接构建数据let treeee = (function makeTreeData(arr, parentId) {let temp = []for (let i = 0; i < arr.length; i++) {if (arr[i].parentId === parentId) {temp.push(arr[i])arr[i].children = makeTreeData(navData, arr[i].id)}}return temp})(navData, null)console.log(treeee);第⼆步将数据渲染⾄页⾯let nav = document.querySelector('.nav')(function makeDomTree(data, node) {let ul //创建⼀个ul节点for (let i = 0; i < data.length; i++) {ul = document.createElement('ul')let li = document.createElement('li')li.innerHTML = data[i].textnode.appendChild(ul)ul.appendChild(li)//以上⼏步是将当前数组的每个项都作为⼀个li放置到ul中 //若有⼦项进⾏递归操作if (data[i].children.length !== 0) {let element = makeDomTree(data[i].children, ul)ul.appendChild(element)}}return ul //返回ul节点})(treeee, nav) //treeee是之前构建好的数据。
JavaScript生成树形菜单（递归算法）
JavaScript⽣成树形菜单（递归算法）1、最终效果图（这⾥仅为实现算法，并加载⾄页⾯，不做任何css界⾯优化）注释：本⽰例包含三级⽬录菜单，但实际上可⽀持N级（可使⽤该代码⾃⾏测试）2、数据源菜单信息⼀般来源于数据库中数据表，且为⾃连接表，其中包含主要字段（主键，菜单名称，⽗级id）；本⽰例在前端页⾯中使⽤对象数组模拟从数据库获取菜单信息；var menuArry = [{ id: 1, name: "办公管理", pid: 0 },{ id: 2, name: "请假申请", pid: 1 },{ id: 3, name: "出差申请", pid: 1 },{ id: 4, name: "请假记录", pid: 2 },{ id: 5, name: "系统设置", pid: 0 },{ id: 6, name: "权限管理", pid: 5 },{ id: 7, name: "⽤户⾓⾊", pid: 6 },{ id: 8, name: "菜单设置", pid: 6 },]; 注释：id——菜单主键id；name——菜单名称；pid——⽗级id3、程序设计菜单信息⼀般来源//菜单列表htmlvar menus = '';//根据菜单主键id⽣成菜单列表html//id：菜单主键id//arry：菜单数组信息function GetData(id, arry) {var childArry = GetParentArry(id, arry);if (childArry.length > 0) {menus += '<ul>';for (var i in childArry) {menus += '<li>' + childArry[i].name;GetData(childArry[i].id, arry);menus += '</li>';}menus += '</ul>';}}//根据菜单主键id获取下级菜单//id：菜单主键id//arry：菜单数组信息function GetParentArry(id, arry) {var newArry = new Array();for (var i in arry) {if (arry[i].pid == id)newArry.push(arry[i]);}return newArry;}注释：本⽰例菜单使⽤ul⽆序列表演⽰，menus变量为最终⽣成的菜单html4、运⾏GetData(0, menuArry)$("body").append(menus);注释：GetData(0, menuArry)，0——顶级菜单主键5、完整代码<!DOCTYPE html><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title><script src="jquery-1.8.3.min.js"></script></head><body><script type="text/javascript">$(function () {var menuArry = [{ id: 1, name: "办公管理", pid: 0 },{ id: 2, name: "请假申请", pid: 1 },{ id: 3, name: "出差申请", pid: 1 },{ id: 4, name: "请假记录", pid: 2 },{ id: 5, name: "系统设置", pid: 0 },{ id: 6, name: "权限管理", pid: 5 },{ id: 7, name: "⽤户⾓⾊", pid: 6 },{ id: 8, name: "菜单设置", pid: 6 },];GetData(0, menuArry)$("body").append(menus);});//菜单列表htmlvar menus = '';//根据菜单主键id⽣成菜单列表html//id：菜单主键id//arry：菜单数组信息function GetData(id, arry) {var childArry = GetParentArry(id, arry);if (childArry.length > 0) {menus += '<ul>';for (var i in childArry) {menus += '<li>' + childArry[i].name;GetData(childArry[i].id, arry);menus += '</li>';}menus += '</ul>';}}//根据菜单主键id获取下级菜单//id：菜单主键id//arry：菜单数组信息function GetParentArry(id, arry) {var newArry = new Array();for (var i in arry) {if (arry[i].pid == id)newArry.push(arry[i]);}return newArry;}</script></body></html>。
JSP自定义标签(一) 树形下拉选择菜单
</div>
</form>
<%
String para="";
String actionUrl="";
para=request.getParameter("id");
actionUrl=request.getParameter("actionUrl");
%>
<script language="javascript">
} else {
// first-time call, create the selector.
var selec = new Selector();
selec.textId=id;
selec.id="selector_"+id;
selec.valueId=id+"_value";
selec.path=path;
.append("' value='").append(value==null?"":value).append("'>");
out.println(tag.toString());
} catch (IOException e) {
e.printStackTrace();
}
return SKIP_BODY;
// the reference element that we pass to showAtElement is the button that
// triggers the selector. In this example we align the selector bottom-right
html js树形折叠菜单实例
html js树形折叠菜单实例HTML JS Treeview 可以帮助您在网站上创建一个树形折叠菜单。
以下是一个简单的示例：HTML代码：```html<!DOCTYPE html><html><head><title>Treeview Example</title><style>ul.treeview {list-style-type: none;padding: 0;margin: 0;}ul.treeview li {padding: 5px;position: relative;}ul.treeview li.expandable:before {content: '\25B6';position: absolute;left: -10px;}ul.treeview li.collapsible:before {content: '\25BC';position: absolute;left: -10px;}ul.treeview li ul {display: none;margin-left: 20px;}</style></head><body><ul class="treeview"><li class="expandable">Item 1<ul><li>Sub-item 1</li><li>Sub-item 2</li><li>Sub-item 3</li></ul></li><li class="expandable">Item 2<ul><li>Sub-item 1</li><li>Sub-item 2</li></ul></li><li>Item 3</li></ul><script>var expandableItems = document.querySelectorAll('.expandable');for (var i = 0; i < expandableItems.length; i++) {expandableItems[i].addEventListener('click', function() {var submenu = this.querySelector('ul');if (submenu.style.display === "block") {submenu.style.display = "none";this.classList.remove('collapsible');this.classList.add('expandable');} else {submenu.style.display = "block";this.classList.remove('expandable');this.classList.add('collapsible');}});}</script></body></html>```上述示例中，我们首先在`<ul>`元素上添加了一个名为`treeview`的类。
树形菜单导航源代码
简洁的多级树形导航菜单1、xhtml部分<ul id="menuList"><li class="menubar"><a href="#" id="productsActuator" class="actuator">我的收藏夹</a><ul id="productsMenu" class="menu"><li><a href="#" id="newPhonesActuator" class="actuator">个人网站</a> <ul id="newPhonesMenu" class="submenu"><li><a href="/">网页代码库</a></li><li><a href="/">网页设计师</a></li><li><a href="/">JunChen博客</a></li> <li><a href="/andy/">毅博客</a></li></ul></li><li><a href="#" id="compareActuator" class="actuator">国外网站</a><ul id="compareMenu" class="submenu"><li><a href="/">A List Apart</a></li><li><a href="/">CSS禅意花园</a></li><li><a href="/">456 Berea Street</a></li><li><a href="/">W3C网站</a></li></ul></li></ul></li></ul>2、css部分#menuList {margin: 0px;padding: 10px 0px 10px 15px;border: 1px solid #CCC;width: 203px;background-color: #EEE;color: #000;font-family: verdana, helvetica, arial, sans-serif; }li.menubar {font-size: 12px;line-height: 1.8em;list-style: none;}.menu, .submenu {display: none;margin-left: 15px;padding: 0px;}.menu li, .submenu li {list-style: none;}#menuList a {background-color: transparent;color: #000;font-size: 12px;margin-left: 15px;text-decoration: none;}#menuList a:hover {text-decoration: underline;}3、Javascript部分if (!document.getElementById) {document.getElementById = function() { return null; } }function initializeMenu(menuId, actuatorId) {var menu = document.getElementById(menuId);var actuator = document.getElementById(actuatorId);if (menu == null || actuator == null) return;actuator.onclick = function() {var display = menu.style.display;menu.style.display = (display == "block") ? "none" : "block"; return false;}}window.onload = function() {initializeMenu("productsMenu", "productsActuator");initializeMenu("newPhonesMenu", "newPhonesActuator");initializeMenu("compareMenu", "compareActuator");}简洁的双级导航菜单1、xhtml部分源代码：<ul id="butong-nav"><li><a href="#">Home</a></li><li><a href="#">About</a><ul><li><a href="#">History</a></li><li><a href="#">Team</a></li><li><a href="#">Offices</a></li></ul></li><li><a href="#">Services</a><ul><li><a href="#">Web Design</a></li><li><a href="#">Internet Marketing</a></li><li><a href="#">Hosting</a></li><li><a href="#">Domain Names</a></li><li><a href="#">Broadband</a></li></ul></li><li><a href="#">Contact Us</a><ul><li><a href="#">United Kingdom</a></li> <li><a href="#">France</a></li><li><a href="#">USA</a></li><li><a href="#">Australia</a></li></ul></li></ul>2、css部分源代码#butong-nav, #butong-nav ul {font: normal 11px verdana;margin: 0;padding: 0;list-style: none;width: 150px;border-bottom: 1px solid #CCC;}#butong-nav li {position: relative;}#butong-nav ul {position: absolute;left: 149px;top: 0;display: none;}#butong-nav li a {display: block;text-decoration: none;color: #777;background: #fff;padding: 5px;border: 1px solid #ccc;border-bottom: 0;}#butong-nav li a:hover {text-decoration: underline;}* html #butong-nav li {float: left;height: 1%;}* html #butong-nav li a {height: 1%;}#butong-nav li:hover ul, #butong-nav li.over ul {display: block;}3、Javascript部分源代码startList = function() {if (document.all && document.getElementById) {navRoot = document.getElementById("butong-nav");for (i=0; i<navRoot.childNodes.length; i++) {node = navRoot.childNodes[i];if (node.nodeName == "LI") {node.onmouseover = function() {this.className += "over";}node.onmouseout = function() {this.className = this.className.replace("over", ""); }}}}}window.onload = startList;。
js脚本实现树形菜单
var off_img="/member/pic/ass03.gif";//隐藏时图片
var obj=document.getElementById('c_'+id);
</tbody>
<tbody>
<tr>
<td class="leftmenu1"> <a style="cursor: pointer" onclick="Show(4,img4)"><img src="/member/pic/ass03.gif" width="16" height="16" align="absmiddle" id="img4"/><span class="ft_white">应聘管理</span></a></td></tr>
}
window.onload = function a()
{
var curShow = readCookie('curShow');
var totalShow = 5; //自己修改一共有多少个二级分类
if(curShow!=''&&curShow!=null)
{
for(i=1;i<=totalShow;i++)
<html xmlns="/1999/xhtml">
JS实现无限级网页折叠菜单（类似树形菜单）效果代码
JS实现⽆限级⽹页折叠菜单（类似树形菜单）效果代码本⽂实例讲述了JS实现⽆限级⽹页折叠菜单(类似树形菜单)效果代码。
分享给⼤家供⼤家参考。
具体如下：这是⼀款超不错的⽹页折叠菜单，采⽤JavaScript实现。
折叠菜单是⼤家⽐较常见到的⼀种菜单形式，可⼴泛应⽤于管理系统、后台左侧、产品列表中，本折叠菜单有点树形菜单的味道，相信“⽆限级”会满⾜你的要求。
运⾏效果截图如下：在线演⽰地址如下：具体代码如下：<html><head><title>⽆限级折叠菜单JS版</title><style><!--body,ul,h3 {margin:0px; padding:0px;}li {list-style-type:none;}body{font-size:12px;color:#333;font-family: Simsun;line-height:15px;}a{text-decoration:none;color:#004285;border:none;}a:hover{text-decoration:none;color:#C33;}#menu {width:260px;margin:50px auto;padding:10px;border:#EEE 1px solid;}#menu h3 {font-size:12px;}#menu ul {background:url("images/ul-bg.gif") repeat-y 5px 0px; overflow:hidden;}#menu ul li {padding:5px 0 2px 15px;background:url("images/tree-ul-li.gif") no-repeat 5px -32px;}#menu ul li ul {display:none;}#menu ul li em {cursor:pointer;display:inline-block;width:15px;float:left;height:15px;margin-left:-14px;background:url("images/tree-ul-li.gif") no-repeat -32px 2px;}#menu ul li em.off {background-position: -17px -18px;}#menu ul li#end {background-color:#FFF;}#menu ul.off {display:block;}--></style></head><body><div id="menu"><h3>⽆限级折叠菜单JavaScript版</h3><ul><li><em></em><a href='javascript:void(0);'>菜单_1_1</a><li><em></em><a href='javascript:void(0);'>菜单_4_1</a><ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a> <ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_3_2</a> <ul><li><em></em><a href='javascript:void(0);'>菜单_4_1</a><ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a> <ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li></ul></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_2_2</a> <ul><li><em></em><a href='javascript:void(0);'>菜单_3_1</a><ul><li><em></em><a href='javascript:void(0);'>菜单_4_1</a><ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a> <ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_3_2</a> <ul><li><em></em><a href='javascript:void(0);'>菜单_4_1</a><ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a> <ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li></ul></li></ul></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_1_2</a><li><em></em><a href='javascript:void(0);'>菜单_4_1</a><ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a> <ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_3_2</a> <ul><li><em></em><a href='javascript:void(0);'>菜单_4_1</a><ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a> <ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li></ul></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_2_2</a> <ul><li><em></em><a href='javascript:void(0);'>菜单_3_1</a><ul><li><em></em><a href='javascript:void(0);'>菜单_4_1</a><ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a> <ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_3_2</a> <ul><li><em></em><a href='javascript:void(0);'>菜单_4_1</a><ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a> <ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li></ul></li></ul></li></ul></li></ul><script type="text/javascript">(function(e){for(var _obj=document.getElementById(e.id).getElementsByTagName(e.tag),i=-1,em;em=_obj[++i];){ em.onclick = function(){ //onmouseovervar ul = this.nextSibling;if(!ul){return false;}ul = ul.nextSibling; if(!ul){return false;}if(e.tag != 'a'){ ul = ul.nextSibling; if(!ul){return false;} } //a 标签控制隐藏或删除该⾏for(var _li=this.parentNode.parentNode.childNodes,n=-1,li;li=_li[++n];){if(li.tagName=="LI"){for(var _ul=li.childNodes,t=-1,$ul;$ul=_ul[++t];){switch($ul.tagName){case "UL":$ul.className = $ul!=ul?"" : ul.className?"":"off";break;case "EM":$ul.className = $ul!=this?"" : this.className?"":"off";break;}}}}}}})({id:'menu',tag:'em'});</script></body></html>希望本⽂所述对⼤家的JavaScript程序设计有所帮助。
使用js简单实现了tree树菜单
使⽤js简单实现了tree树菜单复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>tree</title><link href="css/style.css" rel="stylesheet" type="text/css" /><style type="text/css">.node ul{margin-left:20px;}.node .node{display:none;}.node .tree{height:24px;line-height:24px;}.ce_ceng_close{background:url(images/cd_zd1.png) left center no-repeat;padding-left: 15px;}.ce_ceng_open{background:url(images/cd_zd.png) left center no-repeat;}</style><script type="text/javascript" src="/jquery-1.10.2.min.js"></script></head><body><div class="cd_zj_l"><div class="cd_title">⽬录导航</div><div class="cv_fcv node"><div class="tree">哲学、宗教</div><ul class="node"><li><div class="tree">哲学伦理</div><ul class="node"><li><div class="tree">马克思主义哲学</div><div class="tree">马克思主义哲学</div><div class="tree">马克思主义哲学</div><div class="tree">马克思主义哲学</div></li><div style="clear:both"></div></ul></li><div style="clear:both"></div></ul><div class="tree">哲学、宗教</div><ul class="node"><li><div class="tree">哲学伦理</div><ul class="node"><li><div class="tree">马克思主义哲学</div><div class="tree">马克思主义哲学</div><div class="tree">马克思主义哲学</div><div class="tree">马克思主义哲学</div></li></ul></li></ul></div></div><script type="text/javascript">$(".tree").each(function(index, element) {if($(this).next(".node").length>0){$(this).addClass("ce_ceng_close");}});$(".tree").click(function(e){var ul = $(this).next(".node");if(ul.css("display")=="none"){ul.slideDown();$(this).addClass("ce_ceng_open");ul.find(".ce_ceng_close").removeClass("ce_ceng_open"); }else{ul.slideUp();$(this).removeClass("ce_ceng_open");ul.find(".node").slideUp();ul.find(".ce_ceng_close").removeClass("ce_ceng_open"); }});</script></body></html>使⽤js简单实现了树菜单！相信⾃⼰你⼀定可以实现的更好！实现的效果图。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
下载两个指向不同的小图标用于区分
<html> <head> <style> #d1{ width:200; height:400; background-color:#cccccc; border:2px solid black; left:30; top:30; position:absolute; } #d1_head{ height:30; background-color:blue; color:white; font-size:20pt; } #d1_body{ background-color:#cccccc; } .list li{list-style-type:none} .image image:向下.png; </style> <script> function doAction(index){ var obj = document.getElementById('u' + index); if(obj.style.display == 'none'){ obj.style.display = 'block'; if(index=='1'){ document.getElementById("img1").src='向下.png'; }else{ document.getElementById("img2").src='向下.png'; } }else{ obj.style.display = 'none'; if(index=='1'){ document.getElementById("img1").src='向右.png'; }else{ document.getElementById("img2").src='向右.png'; } } }
function test(){ var obj = document.getElementById('l1'); alert(obj.innerHTML); } </script> </head> <body style="font-size:20pt;"> <div id="d1"> <div id="d1_head">树形菜单</div> <ul class="list"> <li> <span onclick="doAction(1);"><img src="向右.png" id="img1"/>羽绒专区</span> </li> <ul style="display:none;" id="u1"> <li><a href="#">羽绒服</a></li> <li><a href="#">羽绒夹克</a></li> </ul> <li> <span onclick="doAction(2);"><img src="向右.png" id="img2"/>靴子专区</span> </li> <ul style="display:none;" id="u2"> <li><a href="#">雪地靴</a></li> <li><a href="#">登山靴</a></li> </ul> </ul> </div> </div> </body> </html>