• 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
            {
                 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
            {
                 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

  • 相关阅读:
    WordPress错误:无法启用插件,因为它引起了一个致命错误
    快速使用 Thinkphp 之一: 准备工作-配置PHP环境及下载Thinkphp文件
    基于XML文件格式引用页面
    PHP清除html、css、js格式并去除空格的PHP函数
    本地无法启动MySQL服务,报的错误:1067,进程意外终止
    快速使用 Thinkphp 之二: 创建自己的应用项目
    HTML页面里加载flash文件源码
    【学习笔记】数据库 windrainpy
    【转】给年轻程序员的建议 windrainpy
    【转】js变量以及其作用域详解 windrainpy
  • 原文地址:https://www.cnblogs.com/zhangjd/p/8438647.html
Copyright © 2020-2023  润新知