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 相关文章推荐
Extjs学习过程中新手容易碰到的低级错误积累
Feb 11 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 Javascript
js有关元素内容操作小结
Dec 20 Javascript
offsetHeight在OnLoad中获取为0的现象
Jul 22 Javascript
jQuery中:nth-child选择器用法实例
Dec 31 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
利用NPM淘宝的node.js镜像加速nvm
Mar 27 Javascript
jQuery 实现双击编辑表格功能
Jun 19 jQuery
解决Extjs下拉框不显示的问题
Jun 21 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 Javascript
Vue中CSS动画原理的实现
Feb 13 Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 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 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
php使用变量动态创建类的对象用法示例
2017/02/06 PHP
PHP-X系列教程之内置函数的使用示例
2017/10/16 PHP
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
基于javascript的COOkie的操作实现只能点一次
2014/12/26 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
JS变量及其作用域
2017/03/29 Javascript
Easyui和zTree两种方式分别实现树形下拉框
2017/08/04 Javascript
Vue表单demo v-model双向绑定问题
2018/06/29 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
2018/08/31 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
Python线程的两种编程方式
2015/04/14 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
卡西欧G-SHOCK英国官网: 防水防震手表
2018/01/08 全球购物
新闻专业推荐信范文
2013/11/20 职场文书
学生检讨书怎么写?
2014/10/10 职场文书
员工辞职信范文大全
2015/05/12 职场文书
秋季运动会加油词
2015/07/18 职场文书
关于分班的感言
2015/08/04 职场文书
Pytest实现setup和teardown的详细使用详解
2021/04/17 Python
golang日志包logger的用法详解
2021/05/05 Golang
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python
MySQL8.0 Undo Tablespace管理详解
2022/06/16 MySQL