彩世界平台-彩世界时时app-彩世界开奖app苹果下载

热门关键词: 彩世界平台,彩世界时时app,彩世界开奖app苹果下载

您的位置:彩世界平台 > 学会党委 > jquery三级折叠菜单

jquery三级折叠菜单

发布时间:2019-09-05 05:14编辑:学会党委浏览(125)

       今天,我们来说下jquery ui里的Accordion,这个功能,主要是用来实现折叠的效果,比较适合做菜单,以及我们之前常见的手风琴。。。我们先看下我们的效果截图:

    jquery三级折叠菜单

    图片 1

    <!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,h1,h2{ margin:0; padding:0; list-style:none;} 
    body{font:12px "宋体";} 
    .tree_box{margin: 5px 0;width: 100px;overflow: hidden;}
    .tree_box h3,.tree_one h4,.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="jquery.js"></script>
    </head>
    
    <body>
    <div class="tree">
        <div class="tree_box">
            <h3>
                我是一级菜单
            </h3>
            <ul class="tree_one" style="display: block;">
                <li>
                    <h4>
                        我是二级菜单
                    </h4>
                    <ul class="tree_two">
                        <li>
                            我是三级菜单
                        <li>
                        <li>
                            我是三级菜单
                        <li>
                        <li>
                            我是三级菜单
                        <li>
                    </ul>
                </li>
                <li>
                    <h4>
                        我是二级菜单
                    </h4>
                    <ul class="tree_two">
                        <li>
                            我是三级菜单
                        <li>
                        <li>
                            我是三级菜单
                        <li>
                        <li>
                            我是三级菜单
                        <li>
                    </ul>
                </li>
                <li>
                    <h4>
                        我是二级菜单
                    </h4>
                    <ul class="tree_two">
                        <li>
                            我是三级菜单
                        <li>
                        <li>
                            我是三级菜单
                        <li>
                        <li>
                            我是三级菜单
                        <li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="tree_box">
            <h3>
                我是一级菜单
            </h3>
            <ul class="tree_one">
                <li>
                    <h4>
                        我是二级菜单
                    </h4>
                    <ul class="tree_two">
                        <li>
                            我是三级菜单
                        <li>
                        <li>
                            我是三级菜单
                        <li>
                        <li>
                            我是三级菜单
                        <li>
                    </ul>
                </li>
                <li>
                    <h4>
                        我是二级菜单
                    </h4>
                    <ul class="tree_two">
                        <li>
                            我是三级菜单
                        <li>
                        <li>
                            我是三级菜单
                        <li>
                        <li>
                            我是三级菜单
                        <li>
                    </ul>
                </li>
                <li>
                    <h4>
                        我是二级菜单
                    </h4>
                    <ul class="tree_two">
                        <li>
                            我是三级菜单
                        <li>
                        <li>
                            我是三级菜单
                        <li>
                        <li>
                            我是三级菜单
                        <li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="tree_box">
            <h3>
                我是一级菜单
            </h3>
            <ul class="tree_one">
                <li>
                    <h4>
                        我是二级菜单
                    </h4>
                    <ul class="tree_two">
                        <li>
                            我是三级菜单
                        <li>
                        <li>
                            我是三级菜单
                        <li>
                        <li>
                            我是三级菜单
                        <li>
                    </ul>
                </li>
                <li>
                    <h4>
                        我是二级菜单
                    </h4>
                    <ul class="tree_two">
                        <li>
                            我是三级菜单
                        <li>
                        <li>
                            我是三级菜单
                        <li>
                        <li>
                            我是三级菜单
                        <li>
                    </ul>
                </li>
                <li>
                    <h4>
                        我是二级菜单
                    </h4>
                    <ul class="tree_two">
                        <li>
                            我是三级菜单
                        <li>
                        <li>
                            我是三级菜单
                        <li>
                        <li>
                            我是三级菜单
                        <li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
        $(function(){
            var h3 = $(".tree_box").find("h3");
            var tree_one = $(".tree_box").find(".tree_one");
            var h4 = $(".tree_one").find("h4");
            var tree_two = $(".tree_one").find(".tree_two");
            h3.each(function(i){
                $(this).click(function(){
                    tree_one.eq(i).slideToggle();
                    tree_one.eq(i).parent().siblings().find(".tree_one").slideUp();
                })
            })
            h4.each(function(i){
                $(this).click(function(){
                    tree_two.eq(i).slideToggle();
                    tree_two.eq(i).parent().siblings().find(".tree_two").slideUp();
                })
            })
        })
    </script>
    </body>
    </html>
    

      如果缺少拖动功能,那么,我们今天的作品就没什么特别了,这里,我们引进了jquery ui的sortable,这样,我就可以上下移动模块了,交互性显得强些,当然了,我们这种设计,打算是用在后台设计里的。。。

     

    本文由彩世界平台发布于学会党委,转载请注明出处:jquery三级折叠菜单

    关键词: