2. 程式人生 > >Bootstrap之側邊導航選單(可摺疊分組) 加了點選摺疊

Bootstrap之側邊導航選單(可摺疊分組) 加了點選摺疊

阿新 • • 發佈：2019-01-15

<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
        <title>表格</title>
        <meta name="keywords" content="側邊導航選單(可分組摺疊)">
        <meta name="description" content="側邊導航選單(可分組摺疊)" />
        <meta name="HandheldFriendly" content="True" /> 

         <!-- 下面三個根據自己路徑替換 -->

        <script src="~/Scripts/jquery-1.8.2.js"></script>   
        <link href="~/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet" />
        <script src="~/Scripts/echarts.min.js"></script>

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
            <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <style>
            .panel-group{max-height:770px;overflow: auto;}
            .leftMenu{margin:10px;margin-top:5px;}
            .leftMenu .panel-heading{font-size:14px;padding-left:20px;height:36px;line-height:36px;color:white;position:relative;cursor:pointer;}/*轉成手形圖示*/
            .leftMenu .panel-heading span{position:absolute;right:10px;top:12px;}
            .leftMenu .menu-item-left{padding: 2px; background: transparent; border:1px solid transparent;border-radius: 6px;}
            .leftMenu .menu-item-left:hover{background:#C4E3F3;border:1px solid #1E90FF;}
        </style>
    </head>

    <body>
        <div class="row">
            <div class="col-md-2">
                <div class="panel-group table-responsive" role="tablist">
                    <div class="panel panel-primary leftMenu">
                        <!-- 利用data-target指定要摺疊的分組列表 -->
                        <div class="panel-heading" id="collapseListGroupHeading1" data-toggle="collapse" data-target="#collapseListGroup1" role="tab" >
                            <h4 class="panel-title">
                                分組1
                                <span class="glyphicon glyphicon-chevron-up right"></span>
                            </h4>
                        </div>
                        <!-- .panel-collapse和.collapse標明摺疊元素 .in表示要顯示出來 -->
                        <div id="collapseListGroup1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading1">
                            <ul class="list-group">
                              <li class="list-group-item">
                                <!-- 利用data-target指定URL -->
                                <button class="menu-item-left" data-target="test2.html">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分組項1-1
                                </button>
                              </li>
                              <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分組項1-2
                                </button>
                              </li>
                              <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分組項1-3
                                </button>
                              </li>
                              <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分組項1-4
                                </button>
                              </li>
                              <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分組項1-5
                                </button>
                              </li>
                              <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分組項1-6
                                </button>
                              </li>
                              <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分組項1-7
                                </button>
                              </li>
                              <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分組項1-8
                                </button>
                              </li>
                              <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分組項1-9
                                </button>
                              </li>
                              <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分組項1-10
                                </button>
                              </li>
                              <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分組項1-11
                                </button>
                              </li>
                            </ul>
                        </div>
                    </div><!--panel end-->
                    <div class="panel panel-primary leftMenu">
                        <div class="panel-heading" id="collapseListGroupHeading2" data-toggle="collapse" data-target="#collapseListGroup2" role="tab" >
                            <h4 class="panel-title">
                                分組2
                                <span class="glyphicon glyphicon-chevron-down right"></span>
                            </h4>
                        </div>
                        <div id="collapseListGroup2" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="collapseListGroupHeading2">
                            <ul class="list-group">
                              <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分組項2-1
                                </button>
                              </li>
                              <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分組項2-2
                                </button>
                              </li>
                              <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分組項2-3
                                </button>
                              </li>
                              <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分組項2-4
                                </button>
                              </li>
                            </ul>
                        </div>
                    </div>  
                </div>
            </div>
            <div class="col-md-10">
                內容
            </div>
        </div>
        <!-- jQuery1.11.3 (necessary for Bo otstrap's JavaScript plugins) -->
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script>
            $(function () {
                $(".panel-heading").click(function (e) {
                    /*切換摺疊指示圖示*/
                    $(this).find("span").toggleClass("glyphicon-chevron-down");
                    $(this).find("span").toggleClass("glyphicon-chevron-up");
                    //var obj = $("#collapseListGroup1");
                    //obj.toggleClass("panel-collapse collapse");
                    //obj.toggleClass("panel-collapse collapse in");

 
                });


                $("#collapseListGroupHeading1").click(function (e) {
                    /*切換摺疊指示圖示*/ 
                    var obj = $("#collapseListGroup1");
                    obj.toggleClass("panel-collapse collapse");
                    obj.toggleClass("panel-collapse collapse in");


                });

                $("#collapseListGroupHeading2").click(function (e) {
                    /*切換摺疊指示圖示*/
                    var obj = $("#collapseListGroup2");
                    obj.toggleClass("panel-collapse collapse");
                    obj.toggleClass("panel-collapse collapse in");


                });
            });
 
        </script>
    </body>

</html>

相關推薦

Bootstrap之側邊導航選單(可摺疊分組) 加了點選摺疊

<!DOCTYPE html> <html lang="zh-CN">     <head>         <meta charset="utf-8">         <meta http-equiv="X-

Bootstrap之側邊導航選單(可摺疊分組)

效果圖： 原始碼： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta ch

bootstrap側邊伸縮選單

  <div class="panel-group table-responsive classify" role="tablist"> <div class="panel panel-primary leftMenu"> <!-- 利用

vue中element UI導航選單(可摺疊式)(導航列表根據後臺資料渲染)

版本一：可摺疊式，資料前臺自定義 <template> <div id="index"> <el-aside width="152px" class="asideNav"> <el-menu :default-act

BootStrap自定義navbar導航選單大小（預設在螢幕小於768px的時候自動摺疊）

在專案中遇到如圖：導航欄實在擠不下，導航條預設是768才摺疊，這時候需要自己修改這個值。翻閱官網介紹是這麼說的：http://v3.bootcss.com/components/#navbar下面記錄下我是如何修改的：一、下載原始碼。http://v3.bootcss.com

用angular寫的仿天貓側邊欄/選單指令，可添隨意加標籤

marks 用angular寫的仿天貓選單指令，可添隨意加標籤 用法 1.current-marks-json初始化已選標籤 2.lt-mark裡會有一個隱藏的input customer-

Framework7學習筆記之 側邊欄

pen 滑動 遮蓋 body style nbsp 筆記 con reveal 一：舊版 1:定義側邊欄並指定側邊欄滑出效果 側邊欄有兩個：左側、右側。 側邊欄在body標簽間定義。 <body> <!-- 1:添加側

SB Admin 2 修改側邊導航欄寬度

boot css 分享 側邊欄 vpd efault 寬度 inpu boa SB Admin 2, 一個免費的 bootstrap 主題，具有很廣泛使用規模，實際使用中發現，導航的側邊欄太寬了，有過右側有大型datatable，會變得很難看。 <div class

微信小程式之側邊欄滑動實現（附完整原始碼）

目錄 一、效果圖 二、原理解析 三、原始碼 四、專案下載 同類文章推薦： 更多幹貨關注公眾號： 一、效果圖 講什麼都不如直接上效果圖好，所以我們先來看下實現效果如何。 通過滑動螢幕，或者點選左上角的圖示按鈕，都能實現側邊欄的劃出效果。   &nb

vue+elementui搭建後臺管理介面(3側邊欄選單)

上一節搭好了主框架，但是標籤頁和側邊欄只是分別展示了各自的選單，如何將二者聯動起來？ 定義路由規則：當有 children 屬性時，從 children 裡取出 path 填充到側邊欄，如： { path: '/', redirect: '/dashboard', name: 'Containe

側邊導航欄

import React, { Component } from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' import { Link, IndexLink } from 'dva/r

BootStrap之包涵下拉選單的輸入框

用法： <div class="row col-md-5 text-center"> <div class="input-group"><!--保持內聯，消除邊框，類

metisMenu.js動態側邊導航的實現（ajax動態渲染部分導航）

  使用metisMenu.js實現後臺管理系統的導航，通過點選導航，切換不同的頁面內容。有些時候。我們需要動態新增頁面的內容，即通過ajax請求後臺來渲染部分導航的內容。 第一部分是靜態導航的實現，即通過點選導航切換右側頁面的實現。第二部分是動態渲染導航的實現。（demo例子

前端外掛之側邊定位隨螢幕滾動而滾動

1.側邊定位一般我們可以用position:fixed;但是有時候不行，比如我需要滾動的div是在整體的裡邊定位，如果用fixed是相對於整個螢幕，如下： 需要滾動的是viewleftshare，而ct只是眾多div中的一個。 <div id="ct" style="

側邊導航工具程式碼封裝 —— 自定義

今天又是忙碌的一天，但是想到明天就雙休日了心情頓時開朗了，哈哈~ 廢話不多說，相信很多小夥伴都在專案中會用到側邊懸浮導航吧？ 就是在網站首頁或者所有頁面的邊上懸浮這一條快捷入口或者工具吧？ 是不是因為每次都要去寫這個功能而感到無聊呢？ 今天我就來安利一波我的自定義側邊欄工具吧！！ 例如樓下這幾個就很常

jQuery實現側邊導航欄效果

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <m

html5手機端的點選彈出側邊滑動選單程式碼

1 <!doctype html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="

jQuery實現側邊導航手風琴效果

側導航的手風琴效果是指，點選含子層導航的父導航時，使原本隱藏的子導航顯示，再次點選，子層導航又恢復隱藏，同時，同一時間只有一個父導航的子導航能夠顯示 $("#sidenav > li").find('.sub-nav').hide();

實現Material Design風格的Actionbar和Drawer側邊導航欄

<strong><span style="font-size:18px;">前言：</span></strong> 自從Google公佈了Material Design之後，Android App的UI更加好看了，動畫也n

側邊導航欄css示例

效果展示： html： <div class="sidebar"> <ul> <li>優先順序 <ul&g