温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

jquery的三级菜单

发布时间:2020-07-27 23:37:32 来源:网络 阅读:513 作者:米西米西1 栏目:web开发

<!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>Jqyery+CSS折叠、合拢的多级菜单</title>


    <style type="text/css">

        *,body,ul,li,h2,h3{

            margin:0;

            padding:0;

            list-style:none;

        }

        body{

            font:12px "宋体";

        }

        .tree_box{

            margin: 5px 0;

            width: 100px;

            overflow: hidden;

        }

        .tree_box h4,.tree_one h5,.tree_two li{

            cursor: pointer;

        }

        .tree_one,.tree_two{

            display: none;

            margin: 0 0 0 10px;

            overflow: hidden;

        }

        .tree_one li{

            margin: 5px 0;

        }

    </style>

    <script type="text/javascript" src="scripts/jquery-1.8.3.js"></script>

</head>


<body>

<div class="tree">

    <div class="tree_box">

        <h4>我是一级菜单</h4>

        <ul class="tree_one">

            <li><h5>我是二级菜单</h5>              

            </li>

            <li><h5>我是二级菜单</h5>

            </li>

            <li><h5>我是二级菜单</h5>

                <ul class="tree_two">

                    <li>我是三级菜单</li>

                    <li>我是三级菜单</li>

                    <li>我是三级菜单</li>

                </ul>

            </li>

        </ul>

    </div>

    <div class="tree_box">

        <h4>我是一级菜单</h4>

        <ul class="tree_one">

            <li><h5>我是二级菜单</h5>

                <ul class="tree_two">

                    <li>我是三级菜单</li>

                    <li>我是三级菜单</li>

                    <li>我是三级菜单</li>

                </ul>

            </li>

            <li><h5>我是二级菜单</h5>

                <ul class="tree_two">

                    <li>我是三级菜单</li>

                    <li>我是三级菜单</li>

                    <li>我是三级菜单</li>

                </ul>

            </li>

        </ul>

    </div>

    <div class="tree_box"><h4>我是一级菜单</h4>

        <ul class="tree_one">

            <li><h5>我是二级菜单</h5>

                <ul class="tree_two">

                    <li>我是三级菜单</li>

                    <li>我是三级菜单</li>

                    <li>我是三级菜单</li>

                </ul>

            </li>

        </ul>

    </div>

</div>

<script type="text/javascript">

    $(function three_level_menu(){

        var h4 = $(".tree_box").find("h4");

        var tree_one = $(".tree_box").find(".tree_one");

        var h5 = $(".tree_one").find("h5");

        var tree_two = $(".tree_one").find(".tree_two");

        h4.each(function(){

            $(this).click(function(){

                $(this).next().slideToggle();

            })

        })

        h5.each(function(i){

            $(this).click(function(){

                $(this).next().slideToggle();

            })

        })

    })

</script>

</body>

</html>


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI