bootstrap 手风琴效果

前端大牛:冯鲁哲  1033850519  惩戒各种web开发业务   欢迎洽谈-------鲁大师

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>按钮插件--按钮状态切换</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
body{padding:10px;margin:10px}
</style>
</head>
<body>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#aa1" data-toggle="collapse" data-parent="#accordion">标题一</a></h4>
</div>
<div class="panel-collapse collapse in" id="aa1">
<div class="panel-body">标题一对应的内容</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#aa2" data-toggle="collapse" data-parent="#accordion" >标题二</a></h4>
</div>
<div class="panel-collapse collapse" id="aa2">
<div class="panel-body">标题二对应的内容</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#aa3" data-toggle="collapse" data-parent="#accordion">标题三</a></h4>
</div>
<div class="panel-collapse collapse" id="aa3">
<div class="panel-body">标题三对应的内容</div>
</div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</body>
</html>

时间: 2024-10-15 23:06:51

bootstrap 手风琴效果的相关文章

基于css3实现手风琴效果

终于在凌晨一点钟逼迫自己写博客.一直想记录自己的前端工程师之路,但毕竟拖延症晚期.因为第一篇随笔,所以多写一点废话吧.刚刚从学校毕业,放弃了一直学习的java,而想从事前端的工作.第一是觉得osgi这类的java框架实在太过笨重和繁琐,也许是真的好用,但也觉得真心不适合我.然后么,也许有点俗,前端真的能做很多华丽花哨的东西出来.到现在也工作一个月了,工资不高,老板不好,但社会毕竟不会总让人满意,没人有手把手教你成大神的话,只能自己努力了.也许会有很多弯路,但做技术的嘛,有磨练总是好事. 对于我个

纯css3实现美化复选框和手风琴效果(详细)

关键技术点和原理: 原理就是把 checkbox或 radio 给隐藏掉   ,然后给选框 绑定一个label标签. 然后用label标签作为容器,在里面放一个:before或一个after 用before模拟选框的框,用after来模拟选框的填充 通过 .magic-checkbox:checked + label:after {/*选框被选中时 显示after填充*/ display: block; } 来确定是否选中复选框,如果checked就把after的显示. 先贴出html的代码 <

CSS3实现手风琴效果-------Day88

所谓的手风琴效果,就是像手风琴一样拉开关上,至于手风琴啥样,貌似那是我好久之前的回忆了. 不扯那些没用的,说说这个坑人的手风琴效果,先来看下效果图: 这个效果不错吧,也比较常用吧,可怜的我最开始的时候以为自己可以做到这个效果,就用display:none/block写了一排的div,你别说,还真出来那个感觉啦,哈哈,这里当然不会这么做,但是在我看明白之后,发现是一样简单到要吐血,这样的应用当初自己怎么就想不到. 实现过程中的第一个让我没想到,却感觉确实这样才对的地方: <div id="h

jQuery插件实例四:手风琴效果[无动画版]

手风琴效果就是内容的折叠与打开,在这个插件中,使用了三种数据来源:1.直接写在DOM结构中:2.将数据写在配置项中:3.从Ajax()中获取数据.在这一版中,各项的切换没有添加动画效果,在下一版中会是有动画效果的. 在这个插件中,CSS和JS的配置非常重要,需要特别注意.另外,加个思考,请先看完后再想这个问题:当点击其中某项时,给width直接添加animate是否合适,当快速在其上移动时,如何保证效果? 效果图预览 插件JS accordionB.js 1 ; 2 (function ($,

手风琴效果

功能描述: 鼠标移到每一个图片上,显示当前图片,其余图片变成宽度为原来的6%,同时图片透明度为1,0.5s后显示图片说明.鼠标移除后,每张照片宽度变为16%的宽度.其中图片说明,没有设计样式,有兴趣的可以自己动手. html代码: <body> <h1>手风琴效果</h1> <div id="content"> <ul> <li> <a href="#"> <h2>图片名

jquery实现简单的手风琴效果

最近看到我看的教学视频有不少手风琴效果,我也试着写一下,当做练习. 明天我放假,就要去找工作,不知道,我的前端之路,能不能正式开始. 菜鸟起飞的机会都没有,那就尴尬了. 纯属练习: 效果如图: html: <ul class="wrap"> <li class="checked"> <span>选项1</span> <div>1</div> </li> <li> <

JS制作图片手风琴效果

使用JS写出 图片的手风琴效果 第一种:浮动版本的手风琴效果,并不推荐,因为会使图片出现抖动的现象 样式则是div中包含ul <script src="animate.js"></script> <script> //1. 找出页面中需要的对象 var box = document.getElementById("box"); var ul = box.children[0]; var lis = ul.children; //2

分享一款jquery+css3实现的手风琴效果代码【js插件】

代码适用于大部分浏览器 演示Demo地址:请猛戳 效果图片 程序吧下载地址 分享一款jquery+css3实现的手风琴效果代码[js插件],布布扣,bubuko.com

用jquery实现手风琴效果

<style type="text/css"> ul li{ list-style: none; width:200px; height:30px; text-align: center; line-height:30px; background-color:deepskyblue; } ul{ display:none; margin:0; padding:0; } h3{ width:200px; height:30px; margin:0; padding:0; te