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.boxy对话框插件代码
Oct 26 Javascript
autoPlay 基于jquery的图片自动播放效果
Dec 07 Javascript
鼠标经过显示二级菜单js特效
Aug 13 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
Feb 03 Javascript
如何用javascript计算文本框还能输入多少个字符
Jul 29 Javascript
详解JavaScript中的4种类型识别方法
Sep 14 Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 Javascript
Bootstrap网格系统详解
Apr 26 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
原生JS实现自定义滚动条效果
Oct 27 Javascript
用Webpack构建Vue项目的实践
Nov 07 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 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
一个PHP日历程序
2006/12/06 PHP
php去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
深入PHP autoload机制的详解
2013/06/09 PHP
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
js tab效果的实现代码
2009/12/26 Javascript
document.execCommand()的用法小结
2014/01/08 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
2017/07/23 Javascript
vuex 使用文档小结篇
2018/01/11 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
微信小程序表单验证form提交错误提示效果
2020/06/19 Javascript
iconfont的三种使用方式详解
2018/08/05 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
2020/02/04 Javascript
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
Python中字符串的格式化方法小结
2016/05/03 Python
简单谈谈python中的多进程
2016/11/06 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
澳大利亚家庭花园和DIY工具网店:VidaXL
2019/05/03 全球购物
高三历史教学反思
2014/01/09 职场文书
机关单位人员学雷锋心得体会
2014/03/10 职场文书
法律进学校实施方案
2014/03/15 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
《藏戏》教学反思
2016/02/23 职场文书
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis
mysqldump进行数据备份详解
2022/07/15 MySQL