折叠菜单

来源：互联网发布：中华红包软件编辑：程序博客网时间：2024/05/28 05:15
折叠效果
<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>Document</title><style type="text/css">        .list_l { width: 330px; float: left; text-align: left; background: #fff; }        .menu_head { height: 47px; line-height: 47px; clear: both; font-size: 14px; color: #525252; cursor: pointer; border: 1px solid #e1e1e1; border-top: 1px solid #F1F1F1; position: relative; margin: 0px; font-weight: bold; background: #f1f1f1 url(images/pro_left.png) center right no-repeat; }        .menu_body { line-height: 38px; border-left: 1px solid #e1e1e1; background: #fff; border-right: 1px solid #e1e1e1; clear: both; }        .list_l h3 b { width: 10px; height: 10px; float: left; background-position: 0 0; margin: 20px; }        b.current { background-position: 0 -40px !important; }        .menu_body a { display: block; height: 38px; line-height: 38px; padding-left: 50px; color: #777777; background: #fff; text-decoration: none; border-bottom: 1px solid #e1e1e1; }        .menu_body a.active {background:#f9f9f9;}        .menu_body a:hover { background:#eee;}.report_list_9_48 { background: url(http://image.cbcie.com/webimg/index/report_list_9_48.png) no-repeat; }</style>    <script type="text/javascript" src="http://cj.cbcie.com/js/jquery-1.6.min.js"></script> </head> <body><div class="list_l menu_list" id="firstpane">            <h3 class="menu_head"><b class="report_list_9_48"></b>铜网综合数据库系统</h3>            <div class="menu_body" style="display: none;">                <a href="/vip/cu/6/metal_db.html#md_list_r" class="" title="价格数据库">价格数据库</a>                <a href="/vip/cu/7/metal_db.html#md_list_r" class="" title="统计数据库">统计数据库</a>                <a href="/vip/cu/8/metal_db.html#md_list_r" class="" title="企业数据库">企业数据库</a>                <a href="/vip/cu/9/metal_db.html#md_list_r" class="" title="政策数据库">政策数据库</a>                <a href="/vip/cu/10/metal_db.html#md_list_r" class="" title="技术数据库">技术数据库</a>                <a href="/vip/cu/11/metal_db.html#md_list_r" class="" title="标准数据库">标准数据库</a>                <a href="/vip/cu/12/metal_db.html#md_list_r" class="" title="知识数据库">知识数据库</a>                <a href="/vip/cu/13/metal_db.html#md_list_r" class="" title="资源数据库">资源数据库</a>            </div>            <h3 class="menu_head"><b class="report_list_9_48 current"></b>铜网重点栏目</h3>            <div class="menu_body" style="">                <a href="/vip/cu/14/metal_db.html#md_list_r" class="" title="价格栏目">价格栏目</a>                <a href="/vip/cu/15/metal_db.html#md_list_r" class="" title="统计栏目">统计栏目</a>            </div>            <h3 class="menu_head"><b class="report_list_9_48"></b>铜网专题数据库系统</h3>            <div class="menu_body" style="display: none;">                <a href="/vip/cu/20/metal_db.html#md_list_r" class="" title="产业链数据系统">产业链数据系统</a>                <a href="/vip/cu/21/metal_db.html#md_list_r" class="" title="资源评估用数据系统">资源评估用数据系统</a>                <a href="/vip/cu/22/metal_db.html#md_list_r" class="" title="对外依存度数据系统">对外依存度数据系统</a>                <a href="/vip/cu/23/metal_db.html#md_list_r" class="" title="价格研究用数据系统">价格研究用数据系统</a>            </div>            <h3 class="menu_head"><b class="report_list_9_48"></b>铜网GIS数据库系统</h3>            <div class="menu_body" style="display: none;">                <a href="/vip/cu/31/metal_db.html#md_list_r" class="" title="GIS数据库系统">GIS数据库系统</a>            </div>            <h3 class="menu_head"><b class="report_list_9_48"></b>铜网可视化图表数据库系统</h3>            <div class="menu_body" style="display: none;">                <a href="/vip/cu/32/metal_db.html#md_list_r" class="active" title="可视化图表数据库系统">可视化图表数据库系统</a>            </div>        </div>    <script type="text/javascript">        $("#firstpane").find(".menu_head").each(function () {            $(this).click(function () {                if ($(this).next(".menu_body").is(":hidden")) {                    $(this).find("b").addClass("current");                    $(this).next(".menu_body").show();                    $(this).siblings(".menu_head").each(function () {                        $(this).find("b").removeClass("current");                        $(this).next(".menu_body").hide();                    });                }                else {                    $(this).find("b").removeClass("current");                    $(this).next(".menu_body").hide();                }                //$(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");            });        });    </script> </body></html>
0 0