第一版：点击一级目录展开，再点击时不能收回

第二版：点击一级目录展开，再点击时可以收回

第三版：优化样式，修复主菜单下的子菜单下级无子节点时点击无反应问题(js报错)

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE html>

<html>

<head>

	<title> ZTREE STYLE </title>

	<meta http-equiv="content-type" content="text/html; charset=UTF-8">

	<link rel="stylesheet" href="css/zTreeStyle.css" type="text/css">

	<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

	<script type="text/javascript" src="js/jquery.ztree.core.js"></script>

	<script type="text/javascript">

		var curMenu = null, zTree_Menu = null;

		var setting = {

			view: {

				showLine: false,

				selectedMulti: false,

				dblClickExpand: false,

				expandSpeed: 500

			},

			data: {

				simpleData: {

					enable: true

				}

			},

			callback: {

				onNodeCreated: this.onNodeCreated,

				beforeClick: this.beforeClick,

				onClick: this.onClick

			}

		};

		var zNodes =[

			{ id:1, pId:0, name:"主菜单 1", open:true},

			{ id:11, pId:1, name:"子菜单 1-1"},

			/* { id:111, pId:11, name:"叶子节点 1-1-1"},

			{ id:112, pId:11, name:"叶子节点 1-1-2"},

			{ id:113, pId:11, name:"叶子节点 1-1-3"},

			{ id:114, pId:11, name:"叶子节点 1-1-4"}, */

			{ id:12, pId:1, name:"子菜单 1-2"},

			{ id:121, pId:12, name:"叶子节点 1-2-1"},

			{ id:122, pId:12, name:"叶子节点 1-2-2"},

			{ id:123, pId:12, name:"叶子节点 1-2-3"},

			{ id:124, pId:12, name:"叶子节点 1-2-4"},

			{ id:2, pId:0, name:"主菜单 2"},

			{ id:21, pId:2, name:"子菜单 2-1"},

			{ id:211, pId:21, name:"叶子节点 2-1-1"},

			{ id:212, pId:21, name:"叶子节点 2-1-2"},

			{ id:213, pId:21, name:"叶子节点 2-1-3"},

			{ id:214, pId:21, name:"叶子节点 2-1-4"},

			{ id:22, pId:2, name:"子菜单 2-2"},

			{ id:221, pId:22, name:"叶子节点 2-2-1"},

			{ id:222, pId:22, name:"叶子节点 2-2-2"},

			{ id:223, pId:22, name:"叶子节点 2-2-3"},

			{ id:224, pId:22, name:"叶子节点 2-2-4"},

			{ id:3, pId:0, name:"主菜单 3"},

			{ id:31, pId:3, name:"子菜单 3-1"},

			{ id:311, pId:31, name:"叶子节点 3-1-1"},

			{ id:312, pId:31, name:"叶子节点 3-1-2"},

			{ id:313, pId:31, name:"叶子节点 3-1-3"},

			{ id:314, pId:31, name:"叶子节点 3-1-4"},

			{ id:32, pId:3, name:"子菜单 3-2"},

			{ id:321, pId:32, name:"叶子节点 3-2-1"},

			{ id:322, pId:32, name:"叶子节点 3-2-2"},

			{ id:323, pId:32, name:"叶子节点 3-2-3"},

			{ id:324, pId:32, name:"叶子节点 3-2-4"}

		];

		function beforeClick(treeId, node) {

			var flag = node.open;

			if (node.isParent) {

				if (node.level === 0) {

					var pNode = curMenu;

					while (pNode && pNode.level !==0) {

						pNode = pNode.getParentNode();

					}

					if (pNode !== node && pNode!= null) {

						var a = $("#" + pNode.tId + "_a");

						a.removeClass("cur");

						zTree_Menu.expandNode(pNode, false);

					}

					a = $("#" + node.tId + "_a");

					a.addClass("cur");

					var isOpen = false;

					for (var i=0,l=node.children.length; i<l; i++) {

						if(node.children[i].open) {

							isOpen = true;

							break;

						}

					}

					if (isOpen) {

						zTree_Menu.expandNode(node, true);

						curMenu = node;

					} else {

						zTree_Menu.expandNode(node.children[0].isParent?node.children[0]:node, true);

						curMenu = node.children[0];

					}

					if (flag) {

						zTree_Menu.expandNode(node, false);

					} else {

						zTree_Menu.expandNode(node, true);

					}

				} else {

					zTree_Menu.expandNode(node);

				}

			}

			return !node.isParent;

		}

		function onClick(e, treeId, node) {

			alert("Do what you want to do!");

		}

		$(document).ready(function(){

			$.fn.zTree.init($("#treeDemo"), setting, zNodes);

			zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");

			if(zTree_Menu.getNodes()[0].children[0].hasOwnProperty("children")){

				curMenu = zTree_Menu.getNodes()[0].children[0].children[0];

			}else{

				curMenu = zTree_Menu.getNodes()[0].children[0];

			}

			zTree_Menu.selectNode(curMenu);

			var a = $("#" + zTree_Menu.getNodes()[0].tId + "_a");

			a.addClass("cur");

		});

	</script>

	<style type="text/css">

		.ztree li a.level0 {

			width:100%;

			height: 30px;

			text-align: center;

			display:block;

			/* background-color: #0B61A4;  */

			border-bottom:1px silver solid;

			text-decoration:none;

		}

		.ztree li a.level0.cur {

			/* background-color: #66A3D2; */

		}

		.ztree li a.level0 span {

			display: block;

			font-family:"微软雅黑", "宋体", Arial, sans-serif;

			font-size:14px;

			font-weight: bold;

			word-spacing:2px;

			line-height:26px;

		}

		.ztree li a.level0 span.button {

			float:right;

			visibility: visible;

			display:none;

		}

		.ztree li span.button.switch.level0 {

			display:none;

		}

	</style>

 </head>

<body>

	<div style="width:100%; height:500px">

		<div style="width:20%; height:100%; border:1px silver solid">

			<ul id="treeDemo" class="ztree"></ul>

		</div>

	</div>

</body>

</html>

Ztree手风琴效果(第三版)的更多相关文章

  1. jQuery插件实例四：手风琴效果[无动画版]

    手风琴效果就是内容的折叠与打开,在这个插件中,使用了三种数据来源:1.直接写在DOM结构中:2.将数据写在配置项中:3.从Ajax()中获取数据.在这一版中,各项的切换没有添加动画效果,在下一版中会是 ...

  2. jQuery插件实例五：手风琴效果[动画效果可配置版]

    昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...

  3. 一步步教你css3手风琴效果的实现

    什么是手风琴效果? 首先我们先来看一段动画,如下图所示: 在上面动画中,我们不难发现,一排照片正常排列,当我鼠标移上(:hover)时,照片会变大显示并且把其它照片挤小.那么在鼠标来回移动的过程中,画 ...

  4. [Android 4.4.3] 泛泰A860 Omni4.4.3 20140610 RC2.0 三版通刷 by syhost

    欢迎关注泛泰非盈利专业第三方开发团队 VegaDevTeam  (本team 由 syhost suky zhaochengw(z大) xuefy(大星星) tenfar(R大师) loogeo cr ...

  5. 简单的web三层架构系统【第三版】

    今天是第三版,和前几天一样今天还是要对代码进行优化,三层架构是一种思想,具体能不能使得整个系统安全和高性能,还是要看代码编写的是否合理,逻辑性是否严谨. 昨天偶然间看到别人写的三层架构中,竟然没有在方 ...

  6. [Android 4.4.3] 泛泰A870 Mokee4.4.3 20140610 RC2.0 通过刷第三版 by syhost

    欢迎关注泛泰非盈利专业第三方开发团队 VegaDevTeam  (本team 由 syhost suky zhaochengw(z大) xuefy(大星星) tenfar(R大师) loogeo cr ...

  7. 【C# in depth 第三版】温故而知新（1）

    声明 本文欢迎转载,原文地址:http://www.cnblogs.com/DjlNet/p/7192354.html 前言 关于这本书(<深入理解C# 第三版>)的详细情况以及好坏,自行 ...

  8. Linux设备驱动程序 第三版 读书笔记（一）

    Linux设备驱动程序 第三版 读书笔记(一) Bob Zhang 2017.08.25 编写基本的Hello World模块 #include <linux/init.h> #inclu ...

  9. Bootstrap手风琴效果

    前面的话 Bootstrap 框架中 Collapse插件(折叠)其实就是我们常见的手风琴效果.当单击一个触发元素时,在另外一个可折叠区域进行显示或隐藏,再次单击时可以反转显示状态.经典的场景是多个折 ...

随机推荐

  1. [Q]将图纸转换为JPG、PNG、plt、DWF、DWFx，XPS等格式文件

    如要将图纸打印为图片,请选择“PublishToWeb JPG.pc3”或“PublishToWeb PNG.pc3”打印机. 如要将图纸打印为plt格式文件,请选择“Windows Default ...

  2. iOS 调用私有函数安装app 卸载 app

    1.环境 1.OS X EI Caption 10.11.1 & Xcode 7 2.Xcode安装Command Line Tools 3.iPhone 安装AppSync 2.Mobile ...

  3. Struts2中一个自定义拦截器的使用

    1.自定义的拦截器的类: package it.web.interceptor; import com.opensymphony.xwork2.ActionContext; import com.op ...

  4. Linux Samba服务主配文件smb.conf中文详解

    从网上找到描述比较详细的smb.conf中文解释: 服务名:smb 配置目录:/etc/sabma/ 主配置文件:/etc/sabma/smb.conf #====================== ...

  5. Mac下Cordova开发环境搭建

    xcode下载 从Mac App Store 下载Xcode,只需要在Store键入Xcode,下载第一个就ok了 cordova安装与配置 cordova需要node安装,使用Safari打开nod ...

  6. 前端好的工具集推荐 lodash

    原来用 backbone 的时候, 感觉 underscore 是一个好的工具集,顿时感觉不错,不用自己一直去封装一些组件. 直到我遇到了 lodash,一只发现 web 项目中有依赖这个库的,但是一 ...

  7. WEB 技术分类 Javascript DOM(Element Node) BOM

    Web technology for developers   Web 技术文档 备注:本文介绍web technology的分类,各自职责,因为之前一直就没有搞明白各种技术.各种名词究竟是属于哪个范 ...

  8. Android内存泄漏检测利器：LeakCanary

    Android内存泄漏检测利器:LeakCanary MAR 28TH, 2016 是什么? 一言以蔽之:LeakCanary是一个傻瓜化并且可视化的内存泄露分析工具 为什么需要LeakCanary? ...

  9. Jedis操作redis（转）

    package org.jzkangta.jedis; import java.util.ArrayList; import java.util.HashMap; import java.util.I ...

  10. PHP全角半角转换函数

    之前试过网上找的通过ASCII之类的字符替换,发现很多莫名其妙的问题.最后还是换成下面的字符替换方式了,把目前能找到的所有全角都列出来了一个个替换吧 /** * 全角字符转换为半角 * * @para ...