jQuery实例1 · 前端开发

~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"> <style> .color1{background-color: black; color: white;} .color2{background-color: white; color: black;} .btn{margin-bottom:50px;} </style> </head> <body> <div class="container"> <div class="row"> <br/><br/><br/><br/><br/><br/><br/> <div class="col-sm-12 col-md-12"> <a class="btn btn-primary btn1"> title1-title1-title1 </a> <div class="collapse collapse1"> <div class="well"> subtitle1-subtitle1-subtitle1-subtitle1-subtitle1-subtitle1-subtitle1-subtitle1-subtitle1-subtitle1-subtitle1-subtitle1-subtitle1-subtitle1 </div> </div> </div> <div class="col-sm-12 col-md-12"> <a class="btn btn-primary btn2"> title2-title2-title2 </a> <div class="collapse collapse2"> <div class="well"> subtitle2-subtitle2-subtitle2-subtitle2-subtitle2-subtitle2-subtitle2-subtitle2-subtitle2-subtitle2-subtitle2-subtitle2-subtitle2-subtitle2-subtitle2-subtitle2- </div> </div> </div> <div class="col-sm-12 col-md-12"> <a class="btn btn-primary btn3"> title3-title3-title3 </a> <div class="collapse collapse3"> <div class="well"> subtitle3-subtitle3-subtitle3-subtitle3-subtitle3-subtitle3-subtitle3-subtitle3-subtitle3-subtitle3-subtitle3-subtitle3-subtitle3-subtitle3-subtitle3-subtitle3-subtitle3-subtitle3- </div> </div> </div> </div> </div> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>   <script> $(function(){ $('.btn').ready(function(){ $(".collapse").hide(); }); $(".btn1").bind("click",function(){ $(this).next(".collapse1").toggle(); $(".btn1").toggleClass('color1'); }); }); </script>  <script> $(function(){ $(".btn2").click(function(){ if($(".collapse2").css("display")=="none"){ $(".collapse2").show(); $(".btn2").toggleClass('color1'); }else{ $(".collapse2").hide(); $(".btn2").toggleClass('color2'); } }); }); </script>  <script> $(function(){ $('.btn3').click(function(){//点击a标签 if($('.collapse3').is(':hidden')){//如果当前隐藏 $('.collapse3').show();//那么就显示div $(".btn3").toggleClass('color1'); }else{//否则 $('.collapse3').hide();//就隐藏div $(".btn3").toggleClass('color2'); } }); }); </script> </body> </html> ~~~ 123 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"> <style> .color1{background-color: black; color: white;} .color2{background-color: white; color: black;} .btn{margin-bottom:50px;} </style> </head> <body> <div class="container"> <div class="row"> <br/><br/><br/><br/><br/><br/><br/> <div class="col-sm-12 col-md-12"> <a class="btn btn-primary btn1"> title1-title1-title1 </a> <div class="collapse collapse1"> <div class="well"> subtitle1-subtitle1-subtitle1-subtitle1-subtitle1-subtitle1-subtitle1-subtitle1-subtitle1-subtitle1-subtitle1-subtitle1-subtitle1-subtitle1 </div> </div> </div> </div> </div> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>  <script> $(function(){ $('.btn').ready(function(){ $(".collapse").hide(); }); $(".btn1").bind("click",function(){ $(this).next(".collapse1").toggle(); $(".btn1").toggleClass('color1'); }); }); </script> </body> </html> ~~~