zoukankan      html  css  js  c++  java
  • Bootstrap Collapse使用

    参考 http://wrongwaycn.github.io/bootstrap/docs/javascript.html#collapse

    http://www.w3resource.com/twitter-bootstrap/collapse.php

    总共有2种方法 一种是使用元素中对class属性加值  另一种则是使用js

    如果是想要很标准的那种效果 就用第一种  如果是需要一些个性化需求  比如全部展开 关闭等 就用js

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8" />
    
      <link href="../css/bootstrap.css" rel="stylesheet">
      <script src="../js/jquery-1.8.0.min.js" type="text/javascript"></script>
      <script src="../js/bootstrap.js" type="text/javascript"></script>
    </head>
    <body>
    
    
    
      <!-- 每个a标签的data-toggle="collapse" 属性 相当于触发器 -->
      <div class="accordion" id="accordion2">
        <!-- 这里有三组类似于android的卡片的东东 在class="accordion-group"的div中 -->
        <div class="accordion-group">
          <div class="accordion-heading">  <!-- 抽屉头  也就是抽屉标题  -->
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" data-target="#collapseOne">
              Collapsible Group Item #1
            </a>
          </div>
    
          <!-- 抽屉内容 也就是要展开的部分 -->
          <!--class中写in  表示默认是展开状态 再次点击标题就是收缩抽屉 -->
          <!-- 但是class写为了in  并不表示显示的状态就是打开状态  只是后台认为抽屉打开了 所以默认就是打开状态的话 还需要加上height auto属性  -->
          <!-- class中一定要有 collapse属性  否则抽屉的内容未打开都会显示 -->
          <div id="collapseOne" class="collapse in" style="height: auto;"> 
            <div class="accordion-inner">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haveollan't heard of them accusamus labore sustainable VHS.
            </div>
          </div>
        </div>
    
        <!-- 第2组 -->
        <div class="accordion-group">
          <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
              Collapsible Group Item #2
            </a>
          </div>
          <div id="collapseTwo" class="collapse" style="height: 0px;">
            <div class="accordion-inner">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
          </div>
        </div>
    
        <!-- 第3组 -->
        <div class="accordion-group">
          <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" data-target="#collapseThree">
              Collapsible Group Item #3
            </a>
          </div>
          <div id="collapseThree" class=" collapse" style="height: 0px;">
            <div class="accordion-inner">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
          </div>
        </div>
      </div>
    
    
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    
    
    
      <div class="accordion" id="accordion1">
      <div class="accordion-group">
        <div class="accordion-heading">
          <a class="accordion-toggle" id="colOne">
            Collapsible Group Item #1
          </a>
        </div>
        <div id="collapse1" class="collapse" >
          <div class="accordion-inner">
            Anim pariatur cliche...
          </div>
        </div>
      </div>
      <div class="accordion-group">
        <div class="accordion-heading">
          <a class="accordion-toggle"  id="colTwo">
            Collapsible Group Item #2
          </a>
        </div>
        <div id="collapse2" class="collapse">
          <div class="accordion-inner">
            Anim pariatur cliche...Anim pariatur cliche...Anim pariatur cliche...Anim pariatur cliche...Anim pariatur cliche...Anim pariatur cliche...Anim pariatur cliche...Anim pariatur cliche...Anim pariatur cliche...Anim pariatur cliche...Anim pariatur cliche...Anim pariatur cliche...Anim pariatur cliche...Anim pariatur cliche...Anim pariatur cliche...Anim pariatur cliche...Anim pariatur cliche...Anim pariatur cliche...Anim pariatur cliche...
          </div>
        </div>
      </div>
    </div> 
    
    <script type="text/javascript">
    $(function(){
      $("#colOne").click(function(){
           $('#collapse1').collapse('toggle');//全部收缩
      });
      $("#colTwo").click(function(){
           $('#collapse2').collapse('toggle');//全部收缩
      });
    
    });
    
    
    </script>
    
    </body>
    </html>
  • 相关阅读:
    《C程序设计语言现代方法》第5章 选择语句
    《C语言程序设计现代方法》第4章 编程题
    《C语言程序设计现代方法》第4章 表达式
    《算法竞赛入门经典》第1章 程序设计入门
    《C语言程序设计现代方法》第3章 格式化输入/输出
    《C语言程序设计现代方法》第2章 编程题
    《C语言程序设计现代方法》第2章 C语言基本概念
    《C语言程序设计现代方法》第1章 C语言概述
    Linux和Windows下的进程管理总结
    silvetlight ListBox Item项自动填满
  • 原文地址:https://www.cnblogs.com/cart55free99/p/3283017.html
Copyright © 2011-2022 走看看