zoukankan      html  css  js  c++  java
  • 基于bootstrap的后台左侧导航菜单和点击二级菜单刷新二级页面时候菜单展开显示当前菜单

    本文使用的框架版本为:

    bootstrap3,Jquery2.1.0  (其他jquery可能会报错,菜单项不执行

    效果如下:

    1.在项目中引入框架:

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

    2.自定义样式

    <style>
    .side-nav-item {
    display: block;
    padding: 10px 15px 10px 15px;
    background-color: #FFFFFF;
    cursor: pointer;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    }

    .item-title {
    background-color: #F5F5F5;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom: 1px solid #DDDDDD;
    }

    .panel-heading {
    margin-top: 5px;
    padding: 0;
    border-radius: 3px;
    border: 1px solid transparent;
    border-color: #DDDDDD;
    }

    .item-body {
    padding: 10px 15px 5px 15px;
    border-bottom: 1px solid #DDDDDD;
    }

    .item-second {
    margin-top: 5px;
    cursor: pointer;
    }

    .item-second a {
    display: block;
    height: 100%;
    100%;
    }
    .at{ color:red;}
    </style>

    3.jquery控制页面点击后展开合并

    <script>

    $(document).ready(function(){
    var path=window.location.pathname;  //先得到地址栏内容
    var regExp=/[/.?]+/;
    str=path.split(regExp);
    var node=str.slice(-2,-1);   //截取地址栏信息得到文件名
    $('#'+node+' a').addClass('at');  //提前写好对应的id,菜单加亮
    $('#'+node).parent().parent().parent().addClass('in'); //id父级的父级的父级添加展开class 
    })
    </script>

    4.html 

    index.html

    <div class="col-md-2 side-nav">
    <div class="panel-group" id="accordion">
    <div class="panel-heading panel">
    <a href="index.html" class="side-nav-item item-title">
    首页
    </a>
    <div class="item-body collapse" id='index'>
    </div>
    </div>

    <div class="panel-heading panel">
    <a data-toggle="collapse" data-parent="#accordion" href="#item-cangku" id="headcangku" class="side-nav-item item-title">
    仓库管理
    </a>
    <div id="item-cangku" class="panel-collapse collapse">
    <div class="item-body">
    <ul class="list-unstyled">
    <li class="item-second" id='a'><a href="a.html">产品库存</a></li>
    <li class="item-second" id='b'><a href="b.html">原料库存</a></li>
    </ul>
    </div>
    </div>
    </div>

    <div class="panel-heading panel">
    <a data-toggle="collapse" data-parent="#accordion" href="#item-caiwu" id="headcaiwu" class="side-nav-item item-title collapsed">
    财务管理
    </a>
    <div id="item-caiwu" class="panel-collapse collapse">
    <div class="item-body">
    222
    </div>
    </div>
    </div>

    <div class="panel-heading panel">
    <a data-toggle="collapse" data-parent="#accordion" href="#item-renshi" id="headrenshi" class="side-nav-item item-title collapsed">
    人事管理
    </a>
    <div id="item-renshi" class="panel-collapse collapse">
    <div class="item-body">

    </div>
    </div>
    </div>
    </div>
    </div>

    这样菜单已经可以运行了,然后还需要点击产品库存的时候仓库管理展开

    a页面菜单部分和inde上面一样

    具体代码如下:

    https://pan.baidu.com/s/1i5wvfOp  

    提取密码  bjk2

  • 相关阅读:
    php基本语法学习
    mac下charles使用
    python--logging模块
    CSS样式(二)
    CSS样式(一)
    HTML、CSS基础知识(四)
    HTML、CSS基础知识(三)
    HTML、CSS基础知识(二)
    HTML、CSS基础知识(一)
    python学习(三十四)第一个框架
  • 原文地址:https://www.cnblogs.com/chaihy/p/6999614.html
Copyright © 2011-2022 走看看