您的位置:68399皇家赌场 > 服务器租用 > bootstrap手风琴折叠示例代码分享

bootstrap手风琴折叠示例代码分享

发布时间:2019-07-06 06:52编辑:服务器租用浏览(151)

    前端

    好了,废话十分少说了,直接给大家贴代码了,具体代码如下所示:

    正文实例为大家享受了bootstrap手风琴的有血有肉代码,供大家参照他事他说加以考察,具体内容如下

    折叠(Collapse)插件能够很轻巧地让页面区域折叠起来。

    <html lang="zh">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简洁实用的jQuery手风琴插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/default.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.accordion.css">
    <!--[if IE]>
    <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
    </head>
    <body>
    <article class="htmleaf-container">
    <header class="htmleaf-header">
    <h1>简洁实用的jQuery手风琴插件 A jQuery accordion plugin</h1>
    <div class="htmleaf-links">
    <a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"> jQuery之家</a>
    <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Accordion/201510122659.html" title="返回下载页" target="_blank"> 返回下载页</a>
    </div>
    </header>
    <div class="accordion">
    <ul>
    <li class="item1 active"><a href="javascript:void();">111</a></li>
    <li class="item2"><a href="javascript:void();">222</a></li>
    <li class="item3"><a href="javascript:void();">333</a></li>
    <li class="item4"><a href="javascript:void();">444</a></li>
    <li class="item5"><a href="javascript:void();">555</a></li>
    </ul>
    </div>
    </article>
    <script src="lib/jquery-1.11.1.min.js"></script>
    <script src="js/jquery.accordion.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    $(".accordion").accordion();
    });
    </script>
    </body>
    </html>
    
    <!DOCTYPE html>
    <html>
    <head>
      <title></title>
      <meta charset="UTF-8"> 
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- 可选的Bootstrap主题文件(一般不用引入) -->
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="js/jquery-1.11.1.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
    <div style="width: 200px;">
          <div class="panel-group" id="accordion2">
          <div class="panel-heading">
            <strong style="font-size: 30px;">论坛分类</strong>
          </div>
            <div class="panel panel-default">
              <div class="panel-heading" data-toggle="collapse"
                data-parent="#accordion2" href="#collapseOne">
                <a class="accordion-toggle">Java</a>
              </div>
              <div id="collapseOne" class="panel-collapse collapse"
                style="height: 0px;">
                <div class="panel-body">
                  <ul class="nav nav-pills nav-stacked">
                    <li><a href="#">Java基础</a></li>
                    <li><a href="#">Java面向对象</a></li>
                    <li><a href="#">Java核心API</a></li>
                    <li><a href="#">JavaEE</a></li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading" data-toggle="collapse"
                data-parent="#accordion2" href="#collapseTwo">
                <a class="accordion-toggle">数据库</a>
              </div>
              <div id="collapseTwo" class="panel-collapse collapse"
                style="height: 0px;">
                <div class="panel-body">
                  <ul class="nav nav-pills nav-stacked">
                    <li><a href="#">SQL基础</a></li>
                    <li><a href="#">Oracle</a></li>
                    <li><a href="#">MySQL</a></li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading" data-toggle="collapse"
                data-parent="#accordion2" href="#collapseThree">
                <a class="accordion-toggle">技术前沿</a>
              </div>
              <div id="collapseThree" class="panel-collapse in"
                style="height: 0px;">
                <div class="panel-body">
                  <ul class="nav nav-pills nav-stacked">
                    <li><a href="#">NoSQL</a></li>
                    <li><a href="#">Hadoop</a></li>
                    <li><a href="#">WebService</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
    </body>
    </html>
    
    <!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, user-scalable=no"> 
     <title>XXX</title> 
     <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"> 
     <link rel="stylesheet" href="css/main.css"> 
     <!--[if lt IE 9]> 
     <script src="lib/html5shiv/html5shiv.min.js"></script> 
     <script src="lib/respond/respond.min.js"></script> 
     <![endif]--> 
    </head> 
    <body style="margin: 200px;"> 
    <!--基本实例--> 
    <button class="btn btn-primary" data-toggle="collapse" data-target="#content"> 
     Bootstrap 
    </button> 
    <div class="collapse" id="content"> 
    <!--<div class="collapse fade in" id="content">--> 
     <div class="well"> 
     Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 
     Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS/HTML 框架。目 
     前,Bootstrap 最新版本为 3.0 。 
     </div> 
    </div> 
    <br> 
    <br> 
    <br> 
    <!--1、折叠部分设置一个id 
     2、在被点击的连接处引入<a href="#collapseOne" rel="external nofollow" rel="external nofollow" rel="external nofollow" 
     3、还是在被点击的连接处加入 date-toggle="collapse" 
     4、写完之后第一次不正常,所以需要在折叠部分写上 
     class=“collapse”(表示一开始隐藏)或者 “collapse in”(表示一开始展开) 
     --> 
    <!--<div class="panel-group"><!–大容器–> 
    
     <div class="panel panel-default"><!–这个表示第一个整块儿的–> 
     <div class="panel-heading"><!–第一部分,被点击部分–> 
      <h4 class="panel-title"> 
      <a href="#collapseOne" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="collapse">1号连接</a> 
      </h4> 
     </div> 
     <div class="panel-collapse collapse" id="collapseOne"><!–第二部分,折叠部分–> 
      <div class="panel-body"> 
      1号内容 
      </div> 
     </div> 
     </div> 
    
     <div class="panel panel-default"><!–这个表示第一个整块儿的–> 
     <div class="panel-heading"><!–第一部分,被点击部分–> 
      <h4 class="panel-title"> 
      <a href="#collapseTwo" rel="external nofollow" rel="external nofollow" data-toggle="collapse">2号连接</a> 
      </h4> 
     </div> 
     <div class="panel-collapse collapse" id="collapseTwo"><!–第二部分,折叠部分–> 
      <div class="panel-body"> 
      2号内容 
      </div> 
     </div> 
     </div> 
    
     <div class="panel panel-default"><!–这个表示第一个整块儿的–> 
     <div class="panel-heading"><!–第一部分,被点击部分–> 
      <h4 class="panel-title"> 
      <a href="#collapseThree" rel="external nofollow" rel="external nofollow" data-toggle="collapse">3号连接</a> 
      </h4> 
     </div> 
     <div class="panel-collapse collapse" id="collapseThree"><!–第二部分,折叠部分–> 
      <div class="panel-body"> 
      3号内容 
      </div> 
     </div> 
     </div> 
    
    </div>--> 
    <br> 
    <br> 
    <br> 
    <br> 
    <!--点击某一展开,其他的都自动折叠 
     1、给大容器加一个id id="accordion" 
     2、给每一个被点击链接加上一个 data-parent="#accordion" 
    --> 
    <div class="panel-group" id="accordion"><!--大容器--> 
    
     <div class="panel panel-default"><!--这个表示第一个整块儿的--> 
     <div class="panel-heading"><!--第一部分,被点击部分--> 
      <h4 class="panel-title"> 
      <a href="#collapseOne" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="collapse" data-parent="#accordion">1号连接</a> 
      </h4> 
     </div> 
     <div class="panel-collapse collapse" id="collapseOne"><!--第二部分,折叠部分--> 
      <div class="panel-body"> 
      1号内容 
      </div> 
     </div> 
     </div> 
    
     <div class="panel panel-default"><!--这个表示第一个整块儿的--> 
     <div class="panel-heading"><!--第一部分,被点击部分--> 
      <h4 class="panel-title"> 
      <a href="#collapseTwo" rel="external nofollow" rel="external nofollow" data-toggle="collapse" data-parent="#accordion">2号连接</a> 
      </h4> 
     </div> 
     <div class="panel-collapse collapse" id="collapseTwo"><!--第二部分,折叠部分--> 
      <div class="panel-body"> 
      2号内容 
      </div> 
     </div> 
     </div> 
    
     <div class="panel panel-default"><!--这个表示第一个整块儿的--> 
     <div class="panel-heading"><!--第一部分,被点击部分--> 
      <h4 class="panel-title"> 
      <a href="#collapseThree" rel="external nofollow" rel="external nofollow" data-toggle="collapse" data-parent="#accordion">3号连接</a> 
      </h4> 
     </div> 
     <div class="panel-collapse collapse" id="collapseThree"><!--第二部分,折叠部分--> 
      <div class="panel-body"> 
      3号内容 
      </div> 
     </div> 
     </div> 
    
    </div> 
    <script src="lib/jquery/jquery.js"></script> 
    <script src="lib/bootstrap/js/bootstrap.js"></script> 
    <script src="js/main.js"></script> 
    </body> 
    
    </html> 
    

    0x01 例子

    jquery.accordion.js代码

    如上所述是小编给大家介绍的Bootstrap 手风琴菜单的兑当代码,希望对我们有着支持,若是大家有别的疑问请给自家留言,小编会及时过来大家的。在此也特别感激大家对剧本之家网址的协助!

    以上就是本文的全体内容,希望对我们的就学抱有支持,也期待大家多多匡助脚本之家。

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="../../css/bootstrap.min.css" rel="stylesheet">
     <script src="http://www.nuyizu.com/uploads/allimg/190706/0A2164948-1.jpg"></script>
     <script src="../../js/bootstrap.min.js"></script>
     <title>折叠插件</title>
    </head>
    <body>
    <div class="container">
     <div class="page-header">
     <h1>折叠插件</h1>
     </div>
     <div class="panel-group" id="panelGroup">
     <div class="panel panel-default">
      <div class="panel-heading">
      <h4 class="panel-title">
       <a href="#collapse1" data-toggle="collapse" data-parent="#panelGroup">
       折叠1
       </a>
      </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">
       内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1
       内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1
      </div>
      </div>
     </div>
     <div class="panel panel-default">
      <div class="panel-heading">
      <h4 class="panel-title">
       <a href="#collapse2" data-toggle="collapse" data-parent="#panelGroup">
       折叠2
       </a>
      </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">
       内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2
       内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2
       内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2
      </div>
      </div>
     </div>
     <div class="panel panel-default">
      <div class="panel-heading">
      <h4 class="panel-title">
       <a href="#collapse3" data-toggle="collapse" data-parent="#panelGroup">
       折叠3
       </a>
      </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">
       内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3
       内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3
       内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3
      </div>
      </div>
     </div>
     <div class="panel panel-default">
      <div class="panel-heading">
      <h4 class="panel-title">
       <a href="#collapse4" data-toggle="collapse" data-parent="#panelGroup">
       折叠4
       </a>
      </h4>
      </div>
      <div id="collapse4" class="panel-collapse collapse">
      <div class="panel-body">
       内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1
       内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1
      </div>
      </div>
     </div>
     </div>
    </div>
    </body>
    </html>
    
    /*
    * jquery.accordion 0.0.1
    * Copyright (c) 2015 lengziyu http://lengziyu.com/
    * Date: 2015-10-10
    */
    ; (function ($) {
    $.fn.accordion = function (opts) {
    //默认值
    var defaults = {
    max: "620px",
    min: "140px",
    speed: "1000"
    }
    var opts = $.extend(defaults, opts);
    this.each(function () {
    var div = $(this),//$(".accordion").accordion(); 表示$(".accordion")这个元素 这里是div
    ul = div.children(),//这里表示ul元素
    li = ul.children();//这里是li元素
    //alert(div.html()   ","   ul.html()   ","   li.html());
    //触发事件
    ul.find(".active a").hide();//隐藏a标签
    //alert(ul.find(".active a").length);
    /*
    fadeOut():淡出
    animate() 方法执行 CSS 属性集的自定义动画。
    该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。
    只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "background-color:red")。
    $(selector).animate(styles,speed,easing,callback) $(selector).animate(styles,options)
    find() 方法获得当前元素集合中每个元素的所有第一级别后代
    搜索所有段落中的后代 span 元素,并将其颜色设置为红色:
    $("p").find("span").css('color','red');
    siblings() 获得匹配集合中每个元素的所有同胞(同一级)
    */
    //鼠标进入li触发
    ul.on("mouseenter", "li", function () {
    //$(this)表示li元素
    $(this).addClass('active')
    .animate({ width: opts.max }, opts.speed)
    .find("a").fadeOut()
    .parent().siblings().removeClass('active')
    .animate({ width: opts.min }, opts.speed)
    .find("a").show();
    })
    })
    }
    })(jQuery);
    

    你或者感兴趣的稿子:

    • bootstrap手风琴制作方法详解
    • 轻巧实用的BootStrap jQuery手风琴插件
    • Angular.js与Bootstrap相结合贯彻手风琴菜单代码
    • 健全分析Bootstrap手风琴效果
    • bootstrap折叠调用collapse()后data-parent不奏效的短平快化解办法
    • Bootstrap基本插件学习笔记之折叠(22)
    • Bootstrap每一日必学之折叠(Collapse)插件
    • www.68399.com ,Bootstrap每日必学之折叠
    • Bootstrap创立可折叠的零件
    • bootstrap手风琴折叠示例代码分享

    你大概感兴趣的稿子:

    • Bootstrap 手风琴菜单的落到实处代码
    • bootstrap手风琴制作方法详解
    • 言必有中实用的BootStrap jQuery手风琴插件
    • Angular.js与Bootstrap相结合贯彻手风琴菜单代码
    • 圆满深入分析Bootstrap手风琴效果
    • bootstrap折叠调用collapse()后data-parent不奏效的急速消除办法
    • Bootstrap基本插件学习笔记之折叠(22)
    • Bootstrap天天必学之折叠(Collapse)插件
    • Bootstrap天天必学之折叠
    • Bootstrap创立可折叠的组件

    职能如下:

    部分css样式

    www.68399.com 1

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:bootstrap手风琴折叠示例代码分享

    关键词: 68399皇家赌场