<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery设计树形结构(类似多级菜单)</title>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script>
$(document).ready(function(e) {
$("li:has(ul)").click(function(event)
{
if(this==event.target)//如果当前li元素就是事件触发的目标对象,防止是触发父对象的事件
{
if($(this).children().is(':hidden'))
{
$(this).children().show();
$(this).css("list-style-image","url(images/-.png)");
}
else
{
$(this).css("list-style-image","url(images/+.png)");
$(this).children().hide();
}
}
}
);
});
</script>
</head>
<body>
<ul class="tree">
<li>菜单1</li>
<li>菜单2
<ul>
<li>菜单2.1</li>
<li>菜单2.2</li>
</ul&g
54、实例 jQuery设计树形结构(类似多级菜单)
最新推荐文章于 2022-06-11 07:58:06 发布