点击标题可以展开效果代码实例
分类:实例代码
分享一段简单的代码实例,它实现了点击标题展开内容的效果。
代码实例:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> #wrap { width: 600px; height: 600px; border: 1px solid #ccc; margin: 0 auto; } .list_wrap { width: 100%; height: 40px; font-weight: normal; border-bottom: 1px solid #beceeb; overflow: hidden; transition: all 1s ease-out; } .list_wrap h2 { width: 100%; height: 40px; line-height: 40px; cursor: pointer; margin: 0; background: rgb( 202,219,235); position: relative; text-indent: 50px; } .list_wrap h2 span { display: block; width: 0; height: 0px; border-width: 10px; overflow: hidden; border-style: solid; border-color: transparent transparent transparent #000; position: absolute; left: 20px; top: 10px; } .list_wrap p { display: block; width: 100%; color: #333; padding: 10px; box-sizing: border-box; } .active { height: 520px; } .active h2 { background: rgb( 0,219,235); } .active h2 span { border-color: #000 transparent transparent transparent; left: 10px; top: 20px; } </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> <script> $(function () { $(".list_wrap").click(function () { $(this).addClass("active").siblings().removeClass("active"); }); }); </script> </head> <body> <div id="wrap"> <div class="list_wrap"> <h2><span></span>div css教程</h2> <p></p> </div> <div class="list_wrap"> <h2><span></span>javascript教程</h2> <p></p> </div> <div class="list_wrap"> <h2><span></span>json教程</h2> <p></p> </div> </div> </body> </html>
点击标题可以展开效果代码实例,这样的场景在实际项目中还是用的比较多的,关于点击标题可以展开效果代码实例就介绍到这了。
点击标题可以展开效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。