前端实战——前端效果accordition的实现
一、bootstrap实现
1）水平折叠组件
使用panel和collaspe组件
<!doctype html> <html lang="zh-hans"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="css/test.css"> <title>test</title> </head> <body> <div class="row"> <div class="blog col-sm-6"> <div class="panel-group" id="accordion"> <div class="panel panel-info"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> bobo&leishao <span class="glyphicon glyphicon-chevron-right pull-right"></span> </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div> <div class="panel panel-info"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> bobo一二事 <span class="glyphicon glyphicon-chevron-right pull-right"></span> </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div> <div class="panel panel-info"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> 磊少一二事 <span class="glyphicon glyphicon-chevron-right pull-right"></span> </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div> </div> </div> </div> <script src="lib/jquery-2.1.4.min.js"></script> <script src="lib/bootstrap/js/bootstrap.min.js"> <script src="js/test.js"></script> </div> </body>
/*blog accordion*/ .blog{ margin-top:50px; } .blog .panel{ border-radius:0; } .blog .panel-heading{ border-radius:0; } .blog .panel-group .panel+.panel{ margin-top:0; } .blog .panel-heading a{ display:block; } .blog .panel-heading span.glyphicon{ width:45px; line-height:38px; font-size:20px; margin-top:-13px; text-align:center; margin-right:-16px; background-color:#ccc; border-top:2px solid transparent; }
2）左右布局可响应的折叠组件（屏幕小时上下布局，屏幕大时导航栏位于内容的左边）
使用bootstrap中的导航元素nav-tabs与collaspe的组合,切换利用data属性，需要自己覆盖掉bootstrap的默认样式
<!doctype html> <html lang="zh-hans"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="css/test.css"> <title>test</title> </head> <body> <h2>垂直的响应式导航</h2> <div class="media"> <div class="pull-left"> <ul class="nav nav-tabs nav-stacked"> <li class="active"><a href="#tab1" data-toggle="tab">Responsive Web Design</a></li> <li><a href="#tab2" data-toggle="tab">Predefine Layout</a></li> <li><a href="#tab3" data-toggle="tab">Our Philosopy</a></li> <li><a href="#tab4" data-toggle="tab">What We do?</a></li> </ul> </div> <div class="tab-wrapper media-body"> <div id="tabContent" class="tab-content"> <div class="tab-pane fade in active" id="tab1"> <h4>Tab1</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p> </div> <div class="tab-pane fade" id="tab2"> <h4>Tab2</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p> </div> <div class="tab-pane fade " id="tab3"> <h4>Tab3</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p> </div> <div class="tab-pane fade " id="tab4"> <h4>Tab4</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p> </div> </div> </div> </div> <script src="lib/jquery-2.1.4.min.js"></script> <script src="lib/bootstrap/js/bootstrap.min.js"></script> <script src="js/test.js"></script> </div> </body>
.nav-tabs>li{ border-bottom:1px solid #e6e6e6; } .nav-tabs{ border-right:1px solid #e6e6e6; } .nav-tabs>li>a{ background-color:#f5f5f5; color:#666; border-radius:0; border:0 none; margin-right:0; padding: 13px 15px; line-height:24px; } .nav-tabs li:last-child{ border-bottom:0 none; } .nav-stacked>li+li{ margin-top:0; } .nav-tabs>li>a:hover{ background: #1f1f20; color:#fff; } .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus { border: 0; color:#fff; background: #1f1f20; position: relative; } .nav-tabs>li.active>a:after{ position: absolute; content: ""; width: auto; height: auto; border-style:solid; border-color: transparent transparent transparent pink; border-width: 25px 22px; /*恰好是两个左右边界的宽度*/ right: -44px; top:0; } .tab-wrapper{ border:1px solid #e6e6e6; margin-bottom:20px; } .tab-content{ padding:20px; }
二、jquery实现
1）水平折叠实现
<!doctype html> <html lang="zh-hans"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" href="css/test.css"> <title>test</title> </head> <body> <div class="panel-group" id="accordion"> <div class="panel"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#collapseOne"> bobo&leishao <span class="glyphicon glyphicon-chevron-right pull-right"></span> </a> </h4> </div> <div id="collapseOne" class="collapse"> <div class="panel-body"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div> <div class="panel-group" id="accordion"> <div class="panel"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#collapseOne"> bobo&leishao2 <span class="glyphicon glyphicon-chevron-right pull-right"></span> </a> </h4> </div> <div id="collapseOne" class="collapse"> <div class="panel-body"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div> <div class="panel-group" id="accordion"> <div class="panel"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#collapseOne"> bobo&leishao3 <span class="glyphicon glyphicon-chevron-right pull-right"></span> </a> </h4> </div> <div id="collapseOne" class="collapse"> <div class="panel-body"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div> <script src="lib/jquery-2.1.4.min.js"></script> <script src="js/test.js"></script> </div> </body>
.panel-heading a{ display:block; text-decoration:none; border-bottom:1px solid pink; height:24px; line-height:24px; }
$(function(){ $(".panel-heading").click(function(){ $(this).parents(".panel-group").find(".collapse").hide(); $(this).siblings(".collapse").show(); //$(this).next().show(); }); })
2）左右垂直导航折叠的实现
<!doctype html> <html lang="zh-hans"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" href="css/test.css"> <title>test</title> </head> <body> <h2>垂直的响应式导航</h2> <div class="accordion"> <div class="nav-wrapper"> <ul class="nav-tabs"> <li class="active"><a href="#tab1" >Responsive Web Design</a></li> <li><a href="#tab2" >Predefine Layout</a></li> <li><a href="#tab3" >Our Philosopy</a></li> <li><a href="#tab4" >What We do?</a></li> </ul> </div> <div class="content-wrapper"> <div id="tabContent" > <div class="tab-pane" id="tab1"> <h4>Tab1</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p> </div> <div class="tab-pane" id="tab2"> <h4>Tab2</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p> </div> <div class="tab-pane" id="tab3"> <h4>Tab3</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p> </div> <div class="tab-pane" id="tab4"> <h4>Tab4</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p> </div> </div> </div> </div> <script src="lib/jquery-2.1.4.min.js"></script> <script src="js/test.js"></script> </div> </body>
ul.nav-tabs{ list-style:none; margin:0; padding:0; border:1px solid #000; float:left; margin-right:10px; } ul.nav-tabs li{ border-bottom:1px solid #e6e6e6; } ul.nav-tabs>li>a{ display:block; text-decoration:none; line-height:50px; height:50px; padding:18px; } .active{ background:#ccc; } ul.nav-tabs>li>a:hover{ background:#ccc; }
$(function(){ $("ul.nav-tabs>li").click(function(){ //alert("start"); $(this).toggleClass("active").siblings().removeClass("active"); var div_id=$(this).find("a").attr("href"); $(div_id+".tab-pane").show().siblings().hide(); }); })
综述：
很多框架功能其实用原生jquery或者js也并不复杂，要根据需求灵活选择