`
yuanjianhang
  • 浏览: 109001 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

CSSXHTMLHTML
阅读更多
自己写的树形下拉菜单，可以无限级的重复用。
这里直接复制了整个文件，直接复制粘贴就可以观察效果了。哦，记得引用外部的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>
分享到：
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics