jquery实现的树形目录实例


Posted in Javascript onJune 26, 2015

本文实例讲述了jquery实现的树形目录。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.st_tree ul li
{
  font-size:13px; 
  color:#222; 
   line-height:18px; 
   cursor:pointer;
   list-style:none; 
   background:url(st_folder.gif); 
  background-repeat:no-repeat;  
  padding:0 0 3px 20px;
}
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".ul").hide();
})
$(document).ready(function()
{
  $("#li1").click(function()
  {
  $("#ul1").toggle();
  });
});
$(document).ready(function()
{
  $("#li2").click(function()
  {
  $("#ul2").toggle();
  });
});
$(document).ready(function()
{
  $("#li3").click(function()
  {
  $("#ul3").toggle();
  });
});
</script>
<div class="st_tree">
<ul>
  <li ><a href="#" >一级目录1</a></li>
  <li id="li1"><a href="#" >一级目录2</a></li>
  <ul show="true" id="ul1" class="ul">
    <li ><a href="#" >二级目录2.1</a></li>
    <li ><a href="#" >二级目录2.2</a></li>
  </ul>
  <li id="li2"><a href="#" >一级目录3</a></li>
  <ul id="ul2" class="ul">
    <li ><a href="#" >二级目录3.1</a></li>
    <li ><a href="#" >二级目录3.2</a></li>
    <li id="li3"><a href="#" >二级目录3.3</a></li>
    <ul id="ul3" class="ul">
      <li ><a href="#" >三级目录3.3.1</a></li>
      <li ><a href="#">三级目录3.3.2</a></li>
    </ul>
  </ul>
</ul>
</div>
</body>
</html>

运行效果如下图所示:

jquery实现的树形目录实例

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
jQuery动画效果animate和scrollTop结合使用实例
Apr 02 Javascript
node.js学习总结之调式代码的方法
Jun 25 Javascript
深入学习jQuery Validate表单验证(二)
Jan 18 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 Javascript
简单学习vue指令directive
Nov 03 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
Nov 26 Javascript
JavaScript中清空数组的三种方式
Mar 22 Javascript
JavaScript设计模式之策略模式详解
Jun 09 Javascript
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
React-native桥接Android原生开发详解
Jan 17 Javascript
基于vue实现可搜索下拉框定制组件
Mar 26 Javascript
layui添加动态菜单与选项卡
Jul 26 Javascript
arguments对象验证函数的参数是否合法
Jun 26 #Javascript
jquery显示loading图片直到网页加载完成的方法
Jun 25 #Javascript
jquery实现不包含当前项的选择器实例
Jun 25 #Javascript
jquery实现两个图片渐变切换效果的方法
Jun 25 #Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 #Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 #Javascript
javascript实现跨域的方法汇总
Jun 25 #Javascript
You might like
php4的session功能评述(一)
2006/10/09 PHP
新手学PHP之数据库操作详解及乱码解决!
2007/01/02 PHP
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
2015/09/20 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
JavaScript显式数据类型转换详解
2019/03/18 Javascript
JS数组方法concat()用法实例分析
2020/01/18 Javascript
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
Python画图学习入门教程
2016/07/01 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
Python continue继续循环用法总结
2018/06/10 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
使用Python发现隐藏的wifi
2020/03/04 Python
django修改models重建数据库的操作
2020/03/31 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
python MD5加密的示例
2020/10/19 Python
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
The North Face北面英国官网:美国著名户外品牌
2017/12/13 全球购物
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
审计工作个人的自我评价
2013/12/25 职场文书
个人收入证明范本
2014/09/18 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
nginx 多个location转发任意请求或访问静态资源文件的实现
2021/03/31 Servers
redis限流的实际应用
2021/04/24 Redis
PyTorch 如何自动计算梯度
2021/05/23 Python