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 相关文章推荐
json 入门基础教程 推荐
Oct 31 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
Oct 24 Javascript
js 数组去重的四种实用方法
Sep 09 Javascript
使用VS开发 Node.js指南
Jan 06 Javascript
js+cookies实现悬浮购物车的方法
May 25 Javascript
js倒计时简单实现代码
Aug 11 Javascript
Bootstrap3 多选和单选框(checkbox)
Dec 29 Javascript
js原生Ajax的封装和原理详解
Mar 11 Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 Javascript
js实现各浏览器全屏代码实例
Jul 03 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
Jun 20 Javascript
jQuery实现倒计时功能完整示例
Jun 01 jQuery
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中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
浅谈php serialize()与unserialize()的用法
2013/06/05 PHP
php class中public,private,protected的区别以及实例分析
2013/06/18 PHP
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
PHP图片裁剪函数(保持图像不变形)
2014/05/04 PHP
PHP内核探索之变量
2015/12/22 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
基于jquery实现最简单的选项卡切换效果
2016/05/08 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
2019/08/20 Javascript
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
Flask数据库迁移简单介绍
2017/10/24 Python
python DataFrame 修改列的顺序实例
2018/04/10 Python
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
详解python Todo清单实战
2018/11/01 Python
Python后台开发Django会话控制的实现
2019/04/15 Python
有750多个顶级品牌的瑞士时尚在线:ABOUT YOU
2017/01/04 全球购物
命名空间(namespace)和程序集(Assembly)有什么区别
2015/09/25 面试题
学生个人求职自荐信格式
2013/09/23 职场文书
毕业生就业协议书
2014/04/11 职场文书
2015年中秋节活动总结
2015/03/23 职场文书
停电通知范文
2015/04/16 职场文书
暂停营业通知
2015/04/25 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书
python 实现mysql自动增删分区的方法
2021/04/01 Python