欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Bootstrap實(shí)現(xiàn)可折疊分組側(cè)邊導(dǎo)航菜單

 更新時(shí)間：2018年03月07日 15:43:51   作者：shangmingchao  
這篇文章主要介紹了Bootstrap實(shí)現(xiàn)可折疊分組側(cè)邊導(dǎo)航菜單的相關(guān)資料,需要的朋友可以參考下

效果圖：

源碼：

<!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個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
    <title>表格</title>
    <meta name="keywords" content="側(cè)邊導(dǎo)航菜單(可分組折疊)">
    <meta name="description" content="側(cè)邊導(dǎo)航菜單(可分組折疊)" />
    <meta name="HandheldFriendly" content="True" />
    <link rel="shortcut icon" href="img/favicon.ico" rel="external nofollow" >
    <!-- Bootstrap3.3.5 CSS -->
    <link href="css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://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;}/*轉(zhuǎn)成手形圖標(biāo)*/
      .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標(biāo)明折疊元素 .in表示要顯示出來(lái) -->
            <div id="collapseListGroup1" class="panel-collapse collapse in" 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>分組項(xiàng)1-1
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分組項(xiàng)1-2
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分組項(xiàng)1-3
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分組項(xiàng)1-4
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分組項(xiàng)1-5
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分組項(xiàng)1-6
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分組項(xiàng)1-7
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分組項(xiàng)1-8
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分組項(xiàng)1-9
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分組項(xiàng)1-10
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分組項(xiàng)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" 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>分組項(xiàng)2-1
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分組項(xiàng)2-2
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分組項(xiàng)2-3
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分組項(xiàng)2-4
                </button>
               </li>
              </ul>
            </div>
          </div> 
        </div>
      </div>
      <div class="col-md-10">
        內(nèi)容
      </div>
    </div>
    <!-- jQuery1.11.3 (necessary for Bo otstrap's JavaScript plugins) -->
    <script src="js/jquery-1.11.3.min.js "></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js "></script>
    <script>
    $(function(){
      $(".panel-heading").click(function(e){
        /*切換折疊指示圖標(biāo)*/
        $(this).find("span").toggleClass("glyphicon-chevron-down");
        $(this).find("span").toggleClass("glyphicon-chevron-up");
      });
    });
    </script>
  </body>
</html>

總結(jié)

以上所述是小編給大家介紹的Bootstrap實(shí)現(xiàn)可折疊分組側(cè)邊導(dǎo)航菜單，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

  • 第四章之BootStrap表單與圖片

    第四章之BootStrap表單與圖片

    Bootstrap，來(lái)自 Twitter，是目前最受歡迎的前端框架。本文給大家介紹Bootstrap表單與圖片的相關(guān)資料,需要的朋友可以參考下
    2016-04-04
  • 深入理解JavaScript 參數(shù)按值傳遞

    深入理解JavaScript 參數(shù)按值傳遞

    本篇文章主要介紹了深入理解JavaScript 參數(shù)按值傳遞，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-05-05
  • javascript 三種數(shù)組復(fù)制方法的性能對(duì)比

    javascript 三種數(shù)組復(fù)制方法的性能對(duì)比

    javascript 三種數(shù)組復(fù)制方法的性能對(duì)比,對(duì)于webkit, 使用concat; 其他瀏覽器, 使用slice.
    2010-01-01
  • JS實(shí)現(xiàn)滑動(dòng)插件

    JS實(shí)現(xiàn)滑動(dòng)插件

    這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)滑動(dòng)插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2020-01-01
  • JS實(shí)現(xiàn)網(wǎng)頁(yè)滾動(dòng)條感應(yīng)鼠標(biāo)變色的方法

    JS實(shí)現(xiàn)網(wǎng)頁(yè)滾動(dòng)條感應(yīng)鼠標(biāo)變色的方法

    這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)頁(yè)滾動(dòng)條感應(yīng)鼠標(biāo)變色的方法,實(shí)例分析了javascript針對(duì)鼠標(biāo)事件的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-02-02
  • 解決JS外部文件中文注釋出現(xiàn)亂碼問(wèn)題

    解決JS外部文件中文注釋出現(xiàn)亂碼問(wèn)題

    中文亂碼在Java Web開(kāi)發(fā)中經(jīng)常出現(xiàn)，這是由于不同的部分編碼不一樣造成的，一般在開(kāi)發(fā)中，我們把所有能設(shè)編碼的地方，全部設(shè)置成UTF-8，但是有時(shí)候還是會(huì)出現(xiàn)亂碼的情況。下面通過(guò)本文給大家分享JS外部文件中文注釋出現(xiàn)亂碼的解決方案，一起看看吧
    2017-07-07
  • 如何使用Bootstrap 按鈕實(shí)例詳解

    如何使用Bootstrap 按鈕實(shí)例詳解

    本章將通過(guò)實(shí)例講解如何使用 Bootstrap 按鈕。任何帶有 class .btn 的元素都會(huì)繼承圓角灰色按鈕的默認(rèn)外觀。但是 Bootstrap 提供了一些選項(xiàng)來(lái)定義按鈕的樣式。具體通過(guò)本文實(shí)例詳解
    2017-03-03
  • Javascript動(dòng)態(tài)伸縮+淡出淡入

    Javascript動(dòng)態(tài)伸縮+淡出淡入

    一種不錯(cuò)代碼應(yīng)用實(shí)例，大家可以根據(jù)這個(gè)代碼，拓寬出更好的代碼
    2009-02-02
  • ES6入門教程之Array.from()方法

    ES6入門教程之Array.from()方法

    這篇文章主要給大家介紹了關(guān)于ES6入門教程之Array.from()方法的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用ES6具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • 圖片onload事件觸發(fā)問(wèn)題解決方法

    圖片onload事件觸發(fā)問(wèn)題解決方法

    當(dāng)頁(yè)面上存在一個(gè)圖片元素時(shí)如：<img src='xxxx' alt="" />,頁(yè)面加載中ie7、8跟chrome下圖片的onload事件非常奇怪，有后完全不觸發(fā)，有時(shí)候觸發(fā)后進(jìn)行改變某些元素的操作，操作結(jié)果無(wú)效。
    2011-07-07

最新評(píng)論