Jquery实现TreeView效果

最新推荐文章于 2024-03-09 15:45:18 发布

_iorilan

最新推荐文章于 2024-03-09 15:45:18 发布

阅读量1.7k

点赞数 1

分类专栏： c# 编程文章标签： jquery function url html

本文链接：https://blog.csdn.net/lan_liang/article/details/6560940

版权

c# 编程专栏收录该内容

294 篇文章 4 订阅

订阅专栏

Jquery实现TreeView效果

TreeView收起：

TreeView全部打开：

TreeView部分打开：

首先准备两张图片，为close.png，为extend.png。

HTML代码：

<div>
<ul>
<li>parentItem1
         <ul>
         <li>childItem1.1
                   <ul>
                   <li>childItem1.1.1</li>
                   <li>childItem1.1.2</li>
                   <li>childItem1.1.3</li>
                   <li>childItem1.1.4</li>
                   </ul>
         </li>
         <li>childItem1.2
                   <ul>
                   <li>childItem1.2.1</li>
                   <li>childItem1.2.2</li>
                   <li>childItem1.2.3</li>
                   </ul>
         </li>
         <li>childItem1.3</li>
         </ul>
</li>
<li>parentItem2
                   <ul>
                   <li>childItem2.1</li>
                   <li>childItem2.2</li>
                   </ul>
</li>
<li>parentItem3</li>
<li>parentItem4</li>
</ul>
</div>

代码说明：一个列表，第一个节点下面嵌套了两层子节点，第二个节点嵌套了一层子节点。

Js部分：

<script src="jquery-1.6.js"></script>
<script type="text/javascript">
dom 结构加载完毕执行
$(document).ready(
function(){
没有子节点的列表样式显示的图片为close.png
$("li:not(:has(ul))").css("list-style-image","close.png");
有子节点的click事件
$("li:has(ul)").click(function(e){
if(this == e.target){
如果子节点隐藏
if($(this).children().is(":hidden")){
 
图片显示为close.png
$(this).css("list-style-image","url(close.png)")
控制子节点显示出来
.children().show();此处也可以为.children().toggle();
}else {
否则，控制子节点隐藏
$(this).css("list-style-image","url(extend.png)")
.children().hide();此处也可以为children().toggle();
         }
}
return false;
加载时候即模拟一次点击事件
}).click();
 
 
}
);
 
</script>