关闭

四层树状数据展示,无样式

标签: cssjquery
194人阅读 评论(0) 收藏 举报
分类:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		ul{
			list-style: none;
		}
		.two{
			display: none;
		}
		.three{
			display: none;
		}
		.four{
			display: none;
		}
	</style>
	<body>	
		<div>
			
			<ul>
				
				<p class="one">第一层</p>
				<li class="two">					
					<ul>
						
						<p class="two2">第二层</p>
						<li  class="three">							
							<ul>
								
								<p class="three2">第三层</p>
								<li  class="four">
									<ul>
									     <li>第四层</li>	
									      <li>第四层</li>	
									       <li>第四层</li>	
									</ul>
								</li>
								
								<p class="three2">第三层</p>
								<li  class="four">
									<ul>
									     <li>第四层</li>	
									      <li>第四层</li>	
									       <li>第四层</li>	
									</ul>
								</li>
								
							</ul>
						</li>				
			</ul>
		</div>
		
		
		
	</body>
	<script type="text/javascript">
		$(".one").click(function(){
			console.log(1)
			if($(this).next().css('display') == 'none'){				
				$(this).next().show()
			}else{
				$(this).next().hide()				
			}			
		})
		
		$(".two2").click(function(){
			console.log(1)
			if($(this).next().css('display') == 'none'){				
				$(this).next().show()
			}else{
				$(this).next().hide()				
			}			
		})
		
		$(".three2").click(function(){
			console.log(1)
			if($(this).next().css('display') == 'none'){				
				$(this).next().show()
			}else{
				$(this).next().hide()				
			}			
		})
	</script>
</html>

0
0
查看评论

二层树状数据展示附带样式全选

* { margin: 0; padding: 0; } ul { list-style: none; } .table-head { width: 100%; background: red; } .table-head p { ...
  • Thekingyu
  • Thekingyu
  • 2017-11-14 18:38
  • 126

树形数据展示

点击打开链接
  • u013224148
  • u013224148
  • 2015-04-21 19:21
  • 1775

ABAP ALV代替ALV TREE显示层级关系

ABAP ALV代替ALV TREE显示层级关系
  • SAPmatinal
  • SAPmatinal
  • 2015-09-10 17:34
  • 701

JavaScript——DOM或以树形展示的Web页面

Web网页的一般可以通过document以及document所相关的各种元素组成。当然我们也可以通过层次结构的树形结构在展现Web页面。如果要对一个网页进行修改的话,我们可以通过document对象,Node对象以及Element对象进行相关的操作。 【Document对象】是所有页面元素的所有者...
  • jsdchenye
  • jsdchenye
  • 2015-07-24 18:25
  • 499

AppCan TreeView

APPCAN 中使用 TreeView 展示数据
  • hds769964581
  • hds769964581
  • 2017-07-31 11:22
  • 201

使用ztree插件实现前端树状结构

实现树状的前端界面呈现,可以使用jquery的ztree插件来实现
  • uestc_lxp
  • uestc_lxp
  • 2015-05-18 10:33
  • 580

jsp+java 仿google日历样式显示数据

功能要求很简单,要一个日历样式的表格,显示每天的工作信息,用最简单的形容方法就是:仿google日历样式。 在很多网站上已经可以看得到相应的效果,所以,这个东西的实现一定不会有难度,就看你是否想得到。百度惯了,懒得自己想。可是百度往往就是那么强大,逼的人不需要去思考。呵呵,网上有很多现成的代码呀。...
  • sundenskyqq
  • sundenskyqq
  • 2012-11-30 18:33
  • 4220

Oracle树形结构的sql语句

关于oracle树状结构查询 关于oracle树状结构查询... 1 一、基本概念:... 1 1.     树结构的描述... 1 2. 关于PRIOR. 2 3. 定义查找起始节点... 2 4.运用 LEVEL. 2 5.节点和...
  • Huozhiwu_11
  • Huozhiwu_11
  • 2015-06-11 16:31
  • 2539

给定任意一个目录,以树形方式展现出该目录中的子目录和文件

练习:给定任意一个目录,以树形方式展现出该目录中的子目录和文件。另外,在展现目录的时候将目录排在上面,文件排在下面。每一层要加上缩进。package com.io2; import java.io.File; import java.util.ArrayList; public class List...
  • zlz18225318697
  • zlz18225318697
  • 2016-10-22 15:25
  • 256

OA权限模块之树状结构

在OA权限模块中,为每个用户设置权限的模块是使用树状结构来呈现的,那么如何使用树状结构显示不同级别的权限呢?这篇文章就为大家简答的介绍一下使用treeView来实现权限的树状结构显示。         一、简单的树状结构   &#...
  • zjx86320
  • zjx86320
  • 2015-10-08 11:14
  • 2364
    个人资料
    • 访问:4326次
    • 积分:396
    • 等级:
    • 排名:千里之外
    • 原创:35篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条