master

分支 (1)

管理

管理

master

Light-Year-Admin-Using-Iframe-v5
/
lyear_components_accordion.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。">
<title>手风琴菜单 - 光年(Light Year Admin V5)后台管理系统模板</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.min.css">
</head>

<body>
<div class="container-fluid">

  <div class="row">

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header"><div class="card-title">手风琴菜单</div></header>
        <div class="card-body">

          <p>手风琴效果使用内部折叠使其可折叠。要渲染展开的手风琴，请在 <code>.accordion</code> 上添加 <code>.open</code>。</p>
          <p>单击下面的手风琴以展开/折叠手风琴内容。</p>
          <div class="accordion" id="accordionExample">
            <div class="accordion-item">
              <h2 class="accordion-header" id="headingOne">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                  第五十九回　柳叶渚边嗔莺咤燕　绛云轩里召将飞符
                </button>
              </h2>
              <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                  离送灵日不远，鸳鸯、琥珀、翡翠、玻璃四人都忙着打点贾母之物，玉钏、彩云、彩霞等皆打叠王夫人之物，当面查点与跟随的管事媳妇们。跟随的一共大小六个丫鬟，十个老婆子媳妇子，男人不算。连日收拾驮轿器械。鸳鸯与玉钏儿皆不随去，只看屋子。一面先几日预发帐幔铺陈之物，先有四五个媳妇并几个男人领了出来，坐了几辆车绕道先至下处，铺陈安插等候。
                </div>
              </div>
            </div>
            <div class="accordion-item">
              <h2 class="accordion-header" id="headingTwo">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                  第六十回　茉莉粉替去蔷薇硝　玫瑰露引来茯苓霜
                </button>
              </h2>
              <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                  话说袭人因问平儿，何事这样忙乱。平儿笑道：“都是世人想不到的，说来也好笑，等几日告诉你，如今没头绪呢，且也不得闲儿。”一语未了，只见李纨的丫鬟来了，说：“平姐姐可在这里，奶奶等你，你怎么不去了？”平儿忙转身出来，口内笑说：“来了，来了。”袭人等笑道：“他奶奶病了，他又成了香饽饽了，都抢不到手。”平儿去了不提。
                </div>
              </div>
            </div>
            <div class="accordion-item">
              <h2 class="accordion-header" id="headingThree">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                  第六十一回　投鼠忌器宝玉瞒赃　判冤决狱平儿行权
                </button>
              </h2>
              <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                  正说着，只听门内又有老婆子向外叫：“小猴儿们，快传你柳婶子去罢，再不来可就误了。”柳家的听了，不顾和小厮说话，忙推门进去，笑说：“不必忙，我来了。”一面来至厨房，——虽有几个同伴的人，他们都不敢自专，单等他来调停分派——一面问众人：“五丫头那去了？”众人都说：“才往茶房里找他们姊妹去了。”
                </div>
              </div>
            </div>
          </div>

          <p class="mt-3">添加 <cpde>.accordion-flush</cpde> 可删除默认背景色、一些边框和一些圆角，以使用其父容器边对边渲染 <code>accordion</code>。</p>
          <div class="accordion accordion-flush" id="accordionFlushExample">
            <div class="accordion-item">
              <h2 class="accordion-header" id="flush-headingOne">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                  第一回  隋主起兵代陈  晋王树功夺嫡
                </button>
              </h2>
              <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                <div class="accordion-body">从来极富、极贵、极畅适田地，说来也使人心快，听来也使人耳快，看来也使人眼快；只是一场冷落败坏根基，都藏在里边，不做千古骂名，定是一番笑话。馆娃宫、铜雀台，惹了多少词人墨客，嗟呀嘲诮。</div>
              </div>
            </div>
            <div class="accordion-item">
              <h2 class="accordion-header" id="flush-headingTwo">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
                  第二回  杨广施谗谋易位  独孤逞妒杀宫妃
                </button>
              </h2>
              <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
                <div class="accordion-body">常言木有蠹，虫生之。心中一有爱憎，受者便十分倾轧。隋自独孤皇后有不喜太子勇的念头，被晋王窥见，故意相形，知他怪的是宠妾，他便故意与萧妃相爱，把平日一段好色的心肠，暂时打叠；知他喜的是俭朴，他便故意饰为节俭模样，把平日一般奢华的意气，暂时收拾。</div>
              </div>
            </div>
            <div class="accordion-item">
              <h2 class="accordion-header" id="flush-headingThree">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
                  第三回  逞雄心李靖诉西岳  造谶语张衡危李渊
                </button>
              </h2>
              <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
                <div class="accordion-body">从来国家吉凶祸福，虽系天命，多因人事；既有定数，必有预兆。于此若能恐惧修省，便可转灾为祥。所谓妖由人兴，亦由人灭。若但心怀猜忌，欲遏乱萌，好行诛杀，因而奸佞乘机，设谋害人，此非但不足以弭灾，且适足以酿祸。</div>
              </div>
            </div>
          </div>

          <p class="mt-3">省略每个节点上的 <code>data-bs-parent</code>。使手风琴折叠项在打开其他项目时保持打开状态。</p>
          <div class="accordion" id="accordionPanelsStayOpenExample">
            <div class="accordion-item">
              <h2 class="accordion-header" id="panelsStayOpen-headingOne">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
                  第四回  齐州城豪杰奋身  植树岗唐公遇盗
                </button>
              </h2>
              <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
                <div class="accordion-body">
                  <strong>这首诗名为“宝剑篇”。</strong> 单说贤才埋没，拂拭无人，总为天下无道，豪杰难容。便是有才如李渊，尚且不容于朝廷，那草泽英雄，谁人鉴赏？也只得混迹尘埃，待时而动了。况且上天既要兴唐灭隋，自藏下一干亡杨广的杀手，辅李渊的功臣。不惟在沙场上一刀一枪，开他的基业，还在无心遇合处，救他的阽危。这英雄是谁？姓秦，名琼，字叔宝，山东历城人，乃祖是北齐领军大将秦旭，父是北齐武卫大将军秦彝。母亲宁氏，生他时，秦旭道：“如今齐国南逼陈朝，西连周境，兵争不已，要使我祖孙父子同建太平。”因取一个乳名，叫做太平郎。
                </div>
              </div>
            </div>
            <div class="accordion-item">
              <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
                  第五回  秦叔宝途次救唐公  窦夫人寺中生世子
                </button>
              </h2>
              <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
                <div class="accordion-body">
                  天地间死生利害，莫非天数。只是天有理而无形，电雷之怒，也有一时来不及的，不得不借一个补天的手段，代天济弱扶危。唐公初时，也只道是寻常盗寇，见他到来，自然惊散。不料这些都是宇文述遣的东宫卫士，都是挑选来的精勇。且寻常盗贼，不得手便可漫散，这干人遵了宇文述吩咐，不杀得唐公并他家眷，怎么回话？所以都拚命来杀。
                </div>
              </div>
            </div>
            <div class="accordion-item">
              <h2 class="accordion-header" id="panelsStayOpen-headingThree">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
                  第六回  五花阵柴嗣昌山寺定姻  一蹇囊秦叔宝穷途落魄
                </button>
              </h2>
              <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingThree">
                <div class="accordion-body">
                  世间遇合，极有机缘，故有意之希求，偏不如无心之契合。唐公是隋室虎臣，窦夫人乃周朝甥女。隋主篡周之时，夫人只得七岁，曾自投床下道：“恨不生为男子，救舅氏之难。”原是一对奇夫妇，定然产下英物。他生下一位小姐，年当十六岁，恰似三国时孙权的妹子刘玄德夫人，不喜弄线拈针，偏喜的开弓舞剑。故此唐公夫妇也奇他。要为他得一良婿。当时求者颇多，唐公都道：庸流俗子，不轻应允。却也时时留心。
                </div>
              </div>
            </div>
          </div>

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

  </div>

</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
</body>
</html>