树形下拉菜单----无限级

yuanjianhang

浏览: 110449 次
性别:
来自: 北京

最近访客更多访客>>

chenbibo110

sdlddr

吝啬你的温柔

文学易

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

前端jQuery

CSS XHTML 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>

分享到：

一个jQuery下拉菜单，代码简单，适合新手阅 ...

2010-10-12 14:02
浏览 2053
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论