折叠菜单

最新推荐文章于 2022-05-25 19:12:26 发布
最新推荐文章于 2022-05-25 19:12:26 发布
阅读量589 收藏
点赞数
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ke0971/article/details/56489490
版权

折叠效果

<!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>
ke0971
关注
专栏目录
Android零基础入门第48节：可折叠列表ExpandableListView
鑫鱻的博客
08-28 1768
ExpandableListView 是 ListView 的子类，把应用中的列表项分为几组，每组里又可包含多个列表项。
WPF自定义左侧折叠菜单
11-27
要创建一个左侧折叠菜单，我们通常会使用`DockPanel`或`Grid`作为容器，利用它们的布局管理能力来定位元素。`DockPanel`允许我们将控件按需停靠在容器的边缘，而`Grid`则可以创建多列或多行的布局。 1. **设计布局*...
jQuery折叠菜单
weixin_33912246的博客
09-02 183
一直对前端的东西掌握的不是太好,最近抽出点时间稍微学点jQuery。感觉确实很好用，提供了一些现成的好东西，还能跨浏览器。 这里就通过一个折叠菜单的实现，记录一下几种常用的动画效果。 一、目标效果 HTML代码： HTML &lt;body&gt; &lt;fieldset&gt; &lt;legend&gt;Collapsible List 1&lt;/le...
jQuery实现折叠菜单 非常简单
GOBY 栏目
07-01 396
折叠菜单的功能很常见，实现的方法也很多，甚至可以用纯CSS来实现。而今天我做的这个例子是在jQuery下实现折叠菜单的功能，非常简单究竟有多简单呢？看例子吧 html结构         简单说明一下:&lt;DL&gt;&lt;DT&gt;&lt;DD&gt;这三个标签虽然不太常用，不过我认为在很多时候使用这个“自定义序列”要比使用 &lt;UL&gt;&lt;LI&gt;的组合更符合语，...
简单的常用的折叠菜单
yls0715的专栏
07-01 724
这是一个简单的常用的折叠菜单            var classCount = 4; // 菜单大类的个数           function Show(theId) {//参数为菜单的编号，从0开始            theTr = eval("tr_" + theId);  //生成相应元素的在页面中的ID                 //通过此ID来设置相
Unity实现QQ列表折叠菜单
08-19
Unity实现QQ列表折叠菜单 Unity是一款功能强大且广泛应用的游戏引擎，今天我们将详细介绍如何使用Unity实现QQ列表折叠菜单。QQ列表折叠菜单是一种常见的UI组件，能够帮助用户快速浏览和选择列表项。 Unity实现QQ...
JAVA SWING可折叠菜单
06-02
在Swing中，可折叠菜单是一种增强用户交互体验的功能，允许用户根据需要隐藏或显示菜单项，使得界面更加整洁，同时也提高了操作的便捷性。本篇文章将深入探讨Java Swing如何实现可折叠菜单，并提供相关知识点。 ...
纯css实现多级折叠菜单折叠树效果
09-24
在现代网页设计中，实现多级折叠菜单（又称为折叠树效果）是一项常见的需求，这种效果可以有效地隐藏深层级的菜单选项，从而使页面更加整洁。本文将详细介绍如何使用纯CSS技术实现多级折叠菜单，不需要借助...
WPF折叠菜单
11-08
在Windows Presentation Foundation（WPF）中，折叠菜单是一种常见的用户界面元素，用于高效地展示层次化的数据或选项。这种菜单可以节省屏幕空间，因为它只显示当前选定或展开的子菜单，而其他子菜单则保持折叠状态...
折叠式菜单
10-22
折叠式菜单，cookie记录折叠菜单方式，折叠式菜单，cookie记录折叠菜单方式，折叠式菜单，cookie记录折叠菜单方式，折叠式菜单，cookie记录折叠菜单方式，折叠式菜单，cookie记录折叠菜单方式，
JavaScript实现折叠式菜单
07-13
使用JavaScript作为html的脚本语言，实现网页中的折叠式菜单功能
jquery实现的折叠式菜单（手风琴式菜单）
wangyining070205的博客
04-26 6811
最近学习jquery，从网上找了一段实现折叠式菜单的代码，发现实现的不够理想，整明白后改写了一下。效果如下： 在这里插入代码片<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>折叠式菜单特效</title> <style> * { padding: 0; margin: 0; } ul
创建折叠式导航菜单
孤独剑的架构师之路
04-28 1187
Untitled Document  function formHandler() { var URL = document.form.site.options [document.form.site.selectedIndex].value; window.location.href = URL; // End --> 
折叠式的菜单
sinat_36841379的博客
02-27 1415
关于折叠式的菜单，网上有挺多的源代码，但是我搜了一下，关于jQuery方面还有css方面上有些看不懂，所以干脆用其他我觉得较为简单的方式来创建折叠式的菜单，知识比较少，所以看不大懂。下面是我改动过的代码。 折叠式的导航 $(document).ready(function(){ $('.link').click(function(){ $(this).next().
一个简单的折叠菜单
学习无止境
11-05 137
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } html,body {
JQuery实现折叠菜单。三个版本，写法。
m0_53881313的博客
05-25 5254
效果如图所示： 点击后展开菜单。同等高度，上面是因为截图原因。 代码如下： 版本1：练习用选择器写样式。代码很丑，后面有好看的。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo.
折叠菜单（ul）
Farer1的博客
12-08 627
<style> ul { list-style: none; } .nav2 { display: none; } .nav1 li:hover .nav2 { display: block; } </style> </head> <body> <ul class=".
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值