自己用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. canvas画布,时钟

    原理代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  2. [.Net Core] 在 Mvc 中简单使用日志组件

    在 Mvc 中简单使用日志组件 基于 .Net Core 2.0,本文只是蜻蜓点水,并非深入浅出. 目录 使用内置的日志组件 简单过渡到第三方组件 - NLog 使用内置的日志 下面使用控制器 Hom ...

  3. New Windows 10 SDK - Multi-instance UWP apps

    概述 前面一篇 About Windows 10 SDK Preview Build 17110 中,我们简单介绍了 Multi-instance UWP Apps,今天结合开发过程详细讲解一下. 在 ...

  4. js制作列表滚动(有滚动条)

    function mouseWheel(obj, fn){ var ff = navigator.userAgent.indexOf("Firefox"); if (ff != - ...

  5. JAVA获取文件数据 ( xxxxx.json )

    //路径fPixFile filePath = new File(fPix);System.out.print("文件路径:" + filePath);try { if (file ...

  6. shiro授权

    一.shiro-permission.ini shiro-permission.ini里面的内容相当于在数据库 #用户 [users] #用户zhang的密码是123,此用户具有role1和role2 ...

  7. 排序算法Java实现(冒泡排序)

    算法描述:对于给定的n个记录,从第一个记录开始依次对相邻的两个记录进行比较,当前面的记录大于后面的记录时,交换位置,进行一轮比较和交换后,n个记录中的最大记录将位于第n位:然后对前(n-1)个记录进行 ...

  8. poj-3185-开关问题

    描述 牛一行20他们喝的水碗.碗可以那么(面向正确的为清凉水)或颠倒的(一个位置而没有水).他们希望所有20个水碗那么,因此用宽鼻子翻碗. 嘴太宽,他们不仅翻转一碗还碗的碗两侧(总共三个或三个——在两 ...

  9. Redis --> 为redis分配新的端口

    为redis分配新的端口 为redis分配一个8888端口,操作步骤如下:1.$REDIS_HOME/redis.conf重新复制一份,重命名为redis8888.conf.2.打开redis8888 ...

  10. CAS 之 Https And Database Authentication(三)

    CAS 之 Https And Database Authentication(三) 标签(空格分隔): CAS sso-examples-guides源码 Intro(介绍) 由上节可知Apereo ...