js 點選展開和收縮效果
引入檔案
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="bootstrap-3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.6/css/bootstrap.min.css" />
效果
關鍵程式碼 css
<style type="text/css">
.panel-group .panel{
border:0px none;
border-radius: 0px;
box-shadow: none;
border-bottom: 1px solid #676767;
}
.panel-heading{
padding: 0;
}
.panel-default > .panel-heading {
color: #7a4b94;
}
.panel-title{
position: relative;
}
.panel-title > a{
display: block;
padding: 11px 35px;
background: #fff;
font-weight: 600;
}
.panel-title > a:hover,
.panel-title > a:focus{
text-decoration: none;
outline: none;
}
.panel-title a:before{
content: "\f068";
font-family: 'FontAwesome';
margin-right: 10px;
color:#7a4b94;
font-weight: normal;
position: absolute;
left:10px;
top:11px;
}
.panel-title .collapsed:before{
content: "\f067";
}
.panel-title a.collapsed{
color:#7a4b94;
font-weight: normal;
}
.panel-body{
color:#727272;
padding: 5px 10px 30px;
line-height: 23px;
letter-spacing: 1px;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body{
border-top: 0px none;
}
</style>
使用例子：
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Section 1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque posuere augue porta turpis ornare, nec commodo dui pellentesque. Sed at metus hendrerit, varius nisl et, iaculis ex. Nulla vitae ipsum diam. Pellentesque vitae
metus vitae massa egestas posuere. Mauris ultricies vehicula tempor. Pellentesque justo turpis, blandit nec ex eu, tempus placerat diam. Morbi a felis commodo eros consectetur rhoncus sed eget lectus. Praesent non erat vehicula, posuere massa id, ultricies
est. Pellentesque sit amet venenatis est, quis posuere ipsum.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Section 2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque posuere augue porta turpis ornare, nec commodo dui pellentesque. Sed at metus hendrerit, varius nisl et, iaculis ex. Nulla vitae ipsum diam. Pellentesque vitae
metus vitae massa egestas posuere. Mauris ultricies vehicula tempor. Pellentesque justo turpis, blandit nec ex eu, tempus placerat diam. Morbi a felis commodo eros consectetur rhoncus sed eget lectus. Praesent non erat vehicula, posuere massa id, ultricies
est. Pellentesque sit amet venenatis est, quis posuere ipsum.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Section 3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque posuere augue porta turpis ornare, nec commodo dui pellentesque. Sed at metus hendrerit, varius nisl et, iaculis ex. Nulla vitae ipsum diam. Pellentesque vitae
metus vitae massa egestas posuere. Mauris ultricies vehicula tempor. Pellentesque justo turpis, blandit nec ex eu, tempus placerat diam. Morbi a felis commodo eros consectetur rhoncus sed eget lectus. Praesent non erat vehicula, posuere massa id, ultricies
est. Pellentesque sit amet venenatis est, quis posuere ipsum.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
相關推薦
js 點選展開和收縮效果
引入檔案 <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script> <script type="text/javascript" src="bootstrap-3
js點選圖片預覽效果
1---引用外掛 <!-- 圖片預覽外掛start --> <script type="text/javascript" src="${pageContext.request.contextPath}/plugins/fancyzoom/js-global
TypeScript實現點選展開div的效果
在前端中，我們經常可以看到一個列表中，點選某一行的某個按鈕這一行就展開來，呈現一個div，本文來介紹一下這種效果的實現。 首先，我們在Student類中寫一個boolean型別的expand屬性，設預設值為false，也就是預設狀態下是不展開的。 然後我們寫
js點選收縮展開文字
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>js點選收縮展開
平移動畫，點選某個控制元件讓一個view收縮到右邊螢幕，再點選展開。
最近做了一個需求。就是點選一個箭頭 ，讓一個view收縮到右邊螢幕，再點選這個View展開，其實看是收縮，其實是平移，讓這個View平移View.getWidth的寬度，同時把這個View的座標也平移過去（不平移座標，點選監聽會還在原來的位置），再讓這個View平移 —View.getW
hexo的next主題部落格中加入分類頁面的js，實現多級目錄，並且能夠點選展開，隱藏下級目錄~（不知道算不算深度優化~~~）
多級標題 在自己的xxxx.md檔案中做如下修改： categories: - 搗蛋鬼 - mac 新建catogery_js.js(名字無所謂) 加入自己的js 我這裡是下面這樣的 function category_js () { $("&
滑鼠點選展開, 移出滑鼠收縮
//滑鼠點選展開, 移出滑鼠收縮 window.onload = function() { var oDiv = document.getElementById('div1'); //滑鼠移入 oDiv.onmouseover = function() {
【Swift 2.1】為 UIView 新增點選事件和點選效果
前言 UIView 不像 UIButton 加了點選事件就會有點選效果，體驗要差不少，這裡分別通過自定義和擴充套件來實現類似 UIButton 的效果。 宣告 歡迎轉載，但請保留文章原始出處:) 部落格園：http://www.cnblogs.com 農民伯伯： http://ove
【JavaScript】jquery右鍵點選事件和js禁用右鍵事件程式碼
jQuery滑鼠點選事件函式//jQuery滑鼠左擊、右擊和中擊事件 $('div').mousedown(function(e){ if(e.which == 3){ alert(
js點選div左上角出現對勾選中效果
分享一段程式碼例項，它實現了選中div元素會在元素一角打勾的效果。 程式碼例項如下: 01020304050607080910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
js點選按鈕載入更多效果
單個列表效果 1，把你要分面顯示的內容的容器元素增加一個class=showMoreNChildren,並增加一個自定義屬性pagesize="8" 這種 這個pagesizie有一個預設值10。可以不寫如 <ul class="showMoreNChildren"
jq無限極下拉選單和點選展開選單
一、html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> &l
ionic v1 新增點選展開/收縮功能
類似QQ的收縮列表，利用ionic1來實現其實很簡單 假設我們要在通過點選一個圖示來作為觸發的 <div ng-control="osController">點選這裡展開/收縮<i src="xxx.png" alt="" ><
【JS】抽獎大轉盤，點選彈出抽獎效果
抽獎大轉盤，點選彈出抽獎效果 <!--抽獎點選彈出框--> <div id="dzp" class="dzp" > <div class="rotary"> <div class="rotaryArr
關於cell點選展開收縮的總結
在最近的專案開發，為了更好的使用者體驗，專案決定使用一些cell預設展開一條，並具有點選展開和收縮的功能。經過檢視資料，後來通過cell 屬性實現了該功能，在開發中也遇到了一些坑，在此總結，以供參考。 @property (nonatomic, stro
js 單選框點選選中和取消
首先是html程式碼，一個單選框 一個 隱藏域，便於給後臺傳遞資料. <input type="checkbox" calss="span4" name="randomPassword" id="randomPassword" value="" onclick="c
js控制文字字數，並能點選顯示和隱藏
很多時候，你不用考慮文字字數的問題，因為和你多地方，如資料庫、後臺控制；都會限制文字字數， 但有時候，比如：你的老闆說，我們現在要做一個簡單的主題介紹單頁，還是要適用於web手機端的；那麼你就有可能會用到以下這段js了，不是特別的複雜，不過一定是實用的。 我寫的很粗糙，大神
js點選圖片放大
HTML程式碼： 1 <img id="img0" src="" style="padding-right:10px; " /> 2 3 <div id="myModal" class="modal"> 4 <!-- 關閉按鈕
Swift UITableViewCell點選展開
在headview上增加點選事件 let tap:UITapGestureRecognizer = UITapGestureRecognizer.init(target: self, action: #selector(headViewClick)) v
JS點選複製文字
html 1 <p>邀請碼:<i>999999999999</i> <span class="copys">複製</span> </p> 2 <textarea rows="" style="disp