您的位置：首页 > Web前端 > JQuery

用Jquery写一个简单的树形菜单

2017-03-30 18:03 661 查看
个人觉得用jquery真的很容易实现。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" content="text/html">

    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

    <title>left</title>

    <style type="text/css">

        ul{list-style-type:none;}

        #tree a:link{text-decoration:none;}

    </style>

</head>

<body>

<div id="tree">

<ul class="menu">

    <li><a href="#">个人报表</a>

        &l
4000
t;ul>

            <li><a href="#">文件一</a>

                <ul>

                    <li><a href="#">文档1</a></li>

                    <li><a href="#">文档2</a></li>

                </ul>

                <ul>

                    <li><a href="#">文档1</a></li>

                    <li><a href="#">文档2</a></li>

                </ul>

            </li>

            <li><a href="#">文件二</a>

                <ul>

                    <li><a href="#">文档1</a></li>

                    <li><a href="#">文档1</a></li>

                </ul>

            </li>

            <li><a href="#">文件三</a>

                <ul>

                    <li><a href="#">文档1</a></li>

                    <li><a href="#">文档1</a></li>

                </ul>

            </li>

        </ul>

    </li>

    <li><a href="#">个人收藏</a></li>

    <li><a href="#">我的分享</a></li>

    <li><a href="#">图库</a></li>

    <li><a href="#">成长记录</a></li>

    <li><a href="#">账户信息</a></li>

</ul>

</div>

<script type="text/javascript">

    $(document).ready(function(){

        $(".menu ul").css("display","none");    //文件准备好后，ul的样式为隐藏

        $(".menu a").on("click",function(){       //点击a的时候就执行以下函数

            $(this).next().toggle();                      //toggle提供为隐藏和显示相互转换的方法    意思是点击的这个 元素的下一个元素是显示的话就隐藏，是隐藏的话就显示

        })

    })

</script>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航