bootstrap 菜單之手風琴效果

自己用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[0].id;
                var parent = $(this).parent(); // 父節點
                var liId = parent[0].id;
                localStorage.setItem("liId", liId);
                localStorage.setItem("id", id);
            })
        })
    </script>

二、搭建的手風琴菜單格式不是很好看，微調了一下

    <style type="text/css">
        .header
        {
            width: 99%;
            height: 43px;
            background: #96b97d;
            line-height: 40px;
        }
        .col-sm-2
        {
            position: relative;
            min-height: 1px;
            padding-right: 0px;
            padding-left: 0px;
            top: 0px;
            left: 0px;
        }
        div.col-sm-10
        {
            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: #333;
            background-color: #dff0d8;
            border-color: #ddd;
        }
        .nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover
        {
            color: #333333;
            background-color: #dff0d8;
        }
        a
        {
            color: #333333;
            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: 99%;
            height: 43px;
            background: #96b97d;
            line-height: 40px;
        }
        .col-sm-2
        {
            position: relative;
            min-height: 1px;
            padding-right: 0px;
            padding-left: 0px;
            top: 0px;
            left: 0px;
        }
        div.col-sm-10
        {
            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: #333;
            background-color: #dff0d8;
            border-color: #ddd;
        }
        .nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover
        {
            color: #333333;
            background-color: #dff0d8;
        }
        a
        {
            color: #333333;
            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[0].id;
                var parent = $(this).parent(); // 父節點
                var liId = parent[0].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