本文介绍了一个自定义的树形下拉菜单实现方案，该菜单能够支持无限层级，并且通过简单的HTML结构配合jQuery实现了良好的交互效果。文章提供了完整的HTML和jQuery代码，方便读者直接复制使用。
自己写的树形下拉菜单，可以无限级的重复用。
这里直接复制了整个文件，直接复制粘贴就可以观察效果了。哦，记得引用外部的js库文件。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="../yuanjianhang/boaibanlv/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul li ul').hide();
$('ul').siblings().css('color','red');
$('a').click(function() {
$(this).siblings().slideToggle('slow');
});
});
</script>
</head>
<body>
<ul>
<li><a href="#">第一个</a></li>
<li><a href="#">第二个</a>
<ul>
<li><a href="#">list02-01</a></li>
<li><a href="#">list02-02</a></li>
<li><a href="#">list02-03</a></li>
</ul>
</li>
<li><a href="#">第三个</a>
<ul>
<li><a href="#">list03-01</a>
<ul>
<li><a href="#">list04-01</a></li>
<li><a href="#">list04-02</a></li>
<li><a href="#">list04-03</a></li>
</ul>
</li>
<li><a href="#">list03-02</a></li>
<li><a href="#">list03-03</a></li>
</ul>
</li>
<li><a href="#">第四个</a></li>
</ul>
</body>
</html>
这里直接复制了整个文件，直接复制粘贴就可以观察效果了。哦，记得引用外部的js库文件。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="../yuanjianhang/boaibanlv/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul li ul').hide();
$('ul').siblings().css('color','red');
$('a').click(function() {
$(this).siblings().slideToggle('slow');
});
});
</script>
</head>
<body>
<ul>
<li><a href="#">第一个</a></li>
<li><a href="#">第二个</a>
<ul>
<li><a href="#">list02-01</a></li>
<li><a href="#">list02-02</a></li>
<li><a href="#">list02-03</a></li>
</ul>
</li>
<li><a href="#">第三个</a>
<ul>
<li><a href="#">list03-01</a>
<ul>
<li><a href="#">list04-01</a></li>
<li><a href="#">list04-02</a></li>
<li><a href="#">list04-03</a></li>
</ul>
</li>
<li><a href="#">list03-02</a></li>
<li><a href="#">list03-03</a></li>
</ul>
</li>
<li><a href="#">第四个</a></li>
</ul>
</body>
</html>
扫一扫
7245
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
