自己用bootstrap搭了个项目，纯属娱乐。。。。为了检验学习bootstrap之成果。

效果如图：

一、搭建中发现一问题，因为以前测试都是写的html页面，这次用了母版页，点击页面的之后，页面会刷新，不会保留菜单选中状态

解决办法：用js保留上次的值，页面刷新重新赋值。给当前选中菜单添加class属性in,a标签设置为选中状态。

    <script type="text/javascript">

        $(function () {

            var divId = localStorage.getItem("id");

            $("#" + divId + "").addClass('in');

            var liId = localStorage.getItem("liId");

            $("#" + liId + "").addClass('active');

            $(".panel-body ul li a").click(function () {

                var all_lis = $(this).parents("div").find(".in");

                var id = all_lis[].id;

                var parent = $(this).parent(); // 父节点

                var liId = parent[].id;

                localStorage.setItem("liId", liId);

                localStorage.setItem("id", id);

            })

        })

    </script>

二、搭建的手风琴菜单格式不是很好看，微调了一下

    <style type="text/css">

        .header

        {

            width: %;

            height: 43px;

            background: #96b97d;

            line-height: 40px;

        }

        .col-sm-

        {

            position: relative;

            min-height: 1px;

            padding-right: 0px;

            padding-left: 0px;

            top: 0px;

            left: 0px;

        }

        div.col-sm-

        {

            position: relative;

            min-height: 1px;

            padding-right: 5px;

            padding-left: 5px;

            top: 0px;

            left: 0px;

        }

        h2

        {

            margin-top: 0px;

        }

        .panel-group

        {

            background: #dff0d8;

        }

        .panel-default > .panel-heading

        {

            color: #;

            background-color: #dff0d8;

            border-color: #ddd;

        }

        .nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover

        {

            color: #;

            background-color: #dff0d8;

        }

        a

        {

            color: #;

            text-decoration: none;

        }

    </style>

三、搭建手风琴菜单，解析下基本原理：当div的class="panel-collapse collapse in"说明当前菜单最外层菜单被选中，如果移除class属性in,则菜单收缩。

    <div class="header">

        <center>

            <h2>

                企业管理系统</h2>

        </center>

    </div>

    <div class="col-md-2">

        <div class="panel-group" id="accordion">

            <div class="panel panel-default">

                <div class="panel-heading">

                    <h4 class="panel-title">

                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">产品管理</a></h4>

                </div>

                <div id="collapseOne" class="panel-collapse collapse">

                    <div class="panel-body">

                        <ul class="nav nav-pills nav-stacked">

                            <li><a href="dbdz.aspx">检验表单管理</a></li>

                            <li><a href="ycllr.aspx">原材料录入</a></li>

                        </ul>

                    </div>

                </div>

            </div>

            <div class="panel panel-default">

                <div class="panel-heading">

                    <h4 class="panel-title">

                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">客户管理</a></h4>

                </div>

                <div id="collapseTwo" class="panel-collapse collapse">

                    <div class="panel-body">

                        <ul class="nav nav-pills nav-stacked">

                            <li><a href="jgdx1.aspx">供货商管理</a></li>

                            <li><a href="ghsgl.aspx">购货商管理</a></li>

                        </ul>

                    </div>

                </div>

            </div>

            <div class="panel panel-default">

                <div class="panel-heading">

                    <h4 class="panel-title">

                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">库存管理</a></h4>

                </div>

                <div id="collapseThree" class="panel-collapse collapse">

                    <div class="panel-body">

                        <ul class="nav nav-pills nav-stacked">

                            <li><a href="kcgl.aspx">库存管理</a></li>

                            <li><a href="qyxxwh.aspx">入库记录</a></li>

                            <li><a href="xsjl.aspx">出厂记录</a></li>

                        </ul>

                    </div>

                </div>

            </div>

            <div class="panel panel-default">

                <div class="panel-heading">

                    <h4 class="panel-title">

                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">产品追溯及公众平台</a></h4>

                </div>

                <div id="collapseFour" class="panel-collapse collapse ">

                    <div class="panel-body">

                        <ul class="nav nav-pills nav-stacked">

                            <li><a href="yaopinflow2.aspx">产品追溯</a></li>

                        </ul>

                    </div>

                </div>

            </div>

            <div class="panel panel-default">

                <div class="panel-heading">

                    <h4 class="panel-title">

                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseFive">系统管理</a></h4>

                </div>

                <div id="collapseFive" class="panel-collapse collapse">

                    <div class="panel-body">

                        <ul class="nav nav-pills nav-stacked">

                            <li><a href="yhgl.aspx">操作员管理</a></li>

                            <li><a href="gzbm.aspx">工作部门</a></li>

                            <li><a href="xtsz2.aspx">系统信息维护</a></li>

                            <li><a href="changePwd.aspx">密码修改</a></li>

                        </ul>

                    </div>

                </div>

            </div>

        </div>

    </div>

四、粘贴下母板页面，可供参考

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebApplication1.data.Site1" %>

<!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 runat="server">

    <title></title>

    <script src="../js/jquery-1.9.1.min.js" type="text/javascript"></script>

    <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <script src="../js/bootstrap.min.js" type="text/javascript"></script>

    <link href="../css/bootstrap-table.css" rel="stylesheet" type="text/css" />

    <script src="../js/bootstrap-table.js" type="text/javascript"></script>

    <link href="../css/bootstrap-select.min.css" rel="stylesheet" type="text/css" />

    <script src="../js/bootstrap-select.js" type="text/javascript"></script>

    <script src="../js/bootstrap-table-zh-CN.js" type="text/javascript"></script>

    <asp:ContentPlaceHolder ID="head" runat="server">

    </asp:ContentPlaceHolder>

    <style type="text/css">

        .header

        {

            width: %;

            height: 43px;

            background: #96b97d;

            line-height: 40px;

        }

        .col-sm-

        {

            position: relative;

            min-height: 1px;

            padding-right: 0px;

            padding-left: 0px;

            top: 0px;

            left: 0px;

        }

        div.col-sm-

        {

            position: relative;

            min-height: 1px;

            padding-right: 5px;

            padding-left: 5px;

            top: 0px;

            left: 0px;

        }

        h2

        {

            margin-top: 0px;

        }

        .panel-group

        {

            background: #dff0d8;

        }

        .panel-default > .panel-heading

        {

            color: #;

            background-color: #dff0d8;

            border-color: #ddd;

        }

        .nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover

        {

            color: #;

            background-color: #dff0d8;

        }

        a

        {

            color: #;

            text-decoration: none;

        }

    </style>

    <script type="text/javascript">

        $(function () {

            var divId = localStorage.getItem("id");

            $("#" + divId + "").addClass('in');

            var liId = localStorage.getItem("liId");

            $("#" + liId + "").addClass('active');

            $(".panel-body ul li a").click(function () {

                var all_lis = $(this).parents("div").find(".in");

                var id = all_lis[].id;

                var parent = $(this).parent(); // 父节点

                var liId = parent[].id;

                localStorage.setItem("liId", liId);

                localStorage.setItem("id", id);

            })

        })

    </script>

</head>

<body>

    <div class="header">

        <center>

            <h2>

                企业管理系统</h2>

        </center>

    </div>

    <div class="col-md-2">

        <div class="panel-group" id="accordion">

            <div class="panel panel-default">

                <div class="panel-heading">

                    <h4 class="panel-title">

                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">产品管理</a></h4>

                </div>

                <div id="collapseOne" class="panel-collapse collapse">

                    <div class="panel-body">

                        <ul class="nav nav-pills nav-stacked">

                            <li id="dbdz"><a href="dbdz.aspx">检验表单管理</a></li>

                            <li id="ycllr"><a href="ycllr.aspx">原材料录入</a></li>

                        </ul>

                    </div>

                </div>

            </div>

            <div class="panel panel-default">

                <div class="panel-heading">

                    <h4 class="panel-title">

                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">客户管理</a></h4>

                </div>

                <div id="collapseTwo" class="panel-collapse collapse">

                    <div class="panel-body">

                        <ul class="nav nav-pills nav-stacked">

                            <li id="jgdx1"><a href="jgdx1.aspx">供货商管理</a></li>

                            <li id="ghsgl"><a href="ghsgl.aspx">购货商管理</a></li>

                        </ul>

                    </div>

                </div>

            </div>

            <div class="panel panel-default">

                <div class="panel-heading">

                    <h4 class="panel-title">

                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">库存管理</a></h4>

                </div>

                <div id="collapseThree" class="panel-collapse collapse">

                    <div class="panel-body">

                        <ul class="nav nav-pills nav-stacked">

                            <li id="kcgl"><a href="kcgl.aspx">库存管理</a></li>

                            <li id="qyxxwh"><a href="qyxxwh.aspx">入库记录</a></li>

                            <li id="xsjl"><a href="xsjl.aspx">出厂记录</a></li>

                        </ul>

                    </div>

                </div>

            </div>

            <div class="panel panel-default">

                <div class="panel-heading">

                    <h4 class="panel-title">

                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">产品追溯及公众平台</a></h4>

                </div>

                <div id="collapseFour" class="panel-collapse collapse ">

                    <div class="panel-body">

                        <ul class="nav nav-pills nav-stacked">

                            <li id="yaopinflow2"><a href="yaopinflow2.aspx">产品追溯</a></li>

                        </ul>

                    </div>

                </div>

            </div>

            <div class="panel panel-default">

                <div class="panel-heading">

                    <h4 class="panel-title">

                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseFive">系统管理</a></h4>

                </div>

                <div id="collapseFive" class="panel-collapse collapse">

                    <div class="panel-body">

                        <ul class="nav nav-pills nav-stacked">

                            <li id="yhgl"><a href="yhgl.aspx">操作员管理</a></li>

                            <li id="gzbm"><a href="gzbm.aspx">工作部门</a></li>

                            <li id="xtsz2"><a href="xtsz2.aspx">系统信息维护</a></li>

                            <li id="changePwd"><a href="changePwd.aspx">密码修改</a></li>

                        </ul>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <div class="col-md-10">

        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>

    </div>

</body>

</html>

最后分享bootstrap的外部文件：https://pan.baidu.com/s/1htBQa2o

bootstrap 菜单之手风琴效果的更多相关文章

  1. JS组件系列——基于Bootstrap Ace模板的菜单Tab页效果优化

    前言:之前发表过一篇  JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有) ,收到很多园友的反馈,当然也包括很多诟病,因为上篇只是将功能实现了,很多细节都没有处理 ...

  2. Bootstrap手风琴效果

    前面的话 Bootstrap 框架中 Collapse插件(折叠)其实就是我们常见的手风琴效果.当单击一个触发元素时,在另外一个可折叠区域进行显示或隐藏,再次单击时可以反转显示状态.经典的场景是多个折 ...

  3. 基于css3实现手风琴效果

    终于在凌晨一点钟逼迫自己写博客.一直想记录自己的前端工程师之路,但毕竟拖延症晚期.因为第一篇随笔,所以多写一点废话吧.刚刚从学校毕业,放弃了一直学习的java,而想从事前端的工作.第一是觉得osgi这 ...

  4. 使用 jQuery & CSS3 实现优雅的手风琴效果

    手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...

  5. 基于 jQuery 实现垂直滑动的手风琴效果

    今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...

  6. JS+JQ手风琴效果

    最新在学习JS写一些实用的小玩意——手风琴 CSS样式: <style type="text/css"> * { margin: 0px; border: 0px; p ...

  7. 纯CSS手风琴效果

    CSS手风琴效果 主体代码如下:                                                                                     ...

  8. jquery 图片手风琴效果

    这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...

  9. 一步步教你css3手风琴效果的实现

    什么是手风琴效果? 首先我们先来看一段动画,如下图所示: 在上面动画中,我们不难发现,一排照片正常排列,当我鼠标移上(:hover)时,照片会变大显示并且把其它照片挤小.那么在鼠标来回移动的过程中,画 ...

随机推荐

  1. C#中的多线程与线程互斥

    通过多线程,C#可以并行地执行代码. 每一个线程都有它独立的执行路径,所有线程都能访问共有变量. 这就引发了线程竞争 这时就需要使用线程安全的处理方式使得线程互斥 先来看一段多线程代码 using S ...

  2. [jdoj1090]矩阵_区间dp

    矩阵 jdoj-1910 题目大意:给你连续的n个矩阵的长和宽,保证每连续的两个相邻矩阵满足相乘的条件,不能改变题目中矩阵的位置,求将这些矩阵相乘为一个矩阵的最小乘法次数. 注释:1<=n< ...

  3. 如何测试一个WEB的输入框？

    WEB输入框是B/S架构系统中页面使用非常频繁的控件,比如我们登录一个网站,输入 用户名和密码的控件都是输入框,比如使用百度搜索,在输入搜索内容的控件也是输入框,比如网购一个物品,我们需要输入购买的数 ...

  4. 为什么说android UI操作不是线程安全的

    转载于:http://blog.csdn.net/lvxiangan/article/details/17218409#t2 UI线程及Android的单线程模型原则 使用Worker线程 Commu ...

  5. (转)[置顶] Android APK反编译就这么简单 详解（附图） .

    在学习Android开发的过程你,你往往会去借鉴别人的应用是怎么开发的,那些漂亮的动画和精致的布局可能会让你爱不释手,作为一个开发者,你可能会很想知道这些效果界面是怎么去实现的,这时,你便可以对改应用 ...

  6. openjudge（四）

    关于switch的应用: #include <iostream>#include<iomanip>using namespace std;int main(){int a,b; ...

  7. spring学习笔记一 入门及配置

    Spring是一个开源框架,为了解决企业应用开发的复杂性而创建的.主要优势之一就是其分层架构.Spring的核心是控制反转和面向切面.简单来说,Spring是一个分层的一站式轻量级开源框架. 使用Sp ...

  8. C语言字符数组作业

    一.PTA实验作业 题目1:7-1 字符串转换成十进制整数 1. 本题PTA提交列表 2. 设计思路 3.代码截图 4.本题调试过程碰到问题及PTA提交列表情况说明. 1.一开始我没想到怎么判断正负的 ...

  9. Linux下C编写基本的多线程socket服务器

    不想多说什么,会搜这些东西的都是想看代码的吧. 一开始不熟悉多线程的时候还在想怎么来控制一个线程的结束,后来发现原来有pthread_exit()函数可以直接在线程函数内部调用结束这个线程. 开始还想 ...

  10. Flask 部署和分发

    到目前为止,启动Flask应用都是通过"app.run()"方法,在开发环境中,这样固然可行,不过到了生产环境上,势必需要采用一个健壮的,功能强大的Web应用服务器来处理各种复杂情 ...