手风琴效果

由前端开发者 · 2018年11月6日15:09:16

摘要：html 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>手风琴demo</title> <meta name="viewport" content="wi……

html 代码

<!DOCTYPE <a href="https://www.rokub.com/category/html" title="html">html</a>> <<a href="https://www.rokub.com/category/html" title="html">html</a>> <head> <meta charset="utf-8"> <title>手风琴demo</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="description" content="Fengqin_Demo"> <script type="text/javascript" src=’http://libs.baidu.com/<a href="https://www.rokub.com/category/jquery" title="jquery">jquery</a>/2.0.0/<a href="https://www.rokub.com/category/jquery" title="jquery">jquery</a>.<a href="https://www.rokub.com/category/javascript" title="js">js</a>’></script> <style> *{ margin: 0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } body{ background: #191970; font-family: ‘Open Sans’, Arial, Helvetica, Sans-serif, Verdana, Tahoma;; } ul{ list-style: none; } a{ color:#FF4500; text-decoration: none; } .container{ width:100%; max-width: 300px; margin: 20px auto 30px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; background: #fff; } .container .link{ cursor: pointer; color: #292421; padding: 15px 15px 15px 50px; font-size:14px; font-weight: 700; border-bottom: 1px solid #ccc; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .container li.open .link{ color:#ED9121; } .container li:last-child .link{ border-bottom: 0; } .desc{ background: #3D59AB; font-size: 14px; display: none; } .desc li{ border-bottom: 1px solid #ccc; } .desc li:last-child{ border-bottom: 0; } .desc a{ display: block; padding:12px; padding-left: 50px; color: #808A87; -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .desc a:hover{ background: #1E90FF; color: #fff; } </style> </head> <body> <ul class = "container"> <li> <div class = "link"><a href="https://www.rokub.com/category/html" title="html">html</a></div> <ul class = "desc"> <li><a href="#"><a href="https://www.rokub.com/category/html" title="html">html</a></a></li> <li><a href="#"><a href="https://www.rokub.com/category/css" title="css">css</a></a></li> </ul> </li> <li> <div class = "link">Javascript</div> <ul class = "desc"> <li><a href="#">Javascript</a></li> <li><a href="#"><a href="https://www.rokub.com/category/jquery" title="jquery">jquery</a></a></li> <li><a href="#">Zepto</a></li> <li><a href="#">Require</a></li> </ul> </li> <li> <div class = "link">Browser</div> <ul class = "desc"> <li><a href="#">Firefox</a></li> <li><a href="#">Chrome</a></li> <li><a href="#">Safari</a></li> </ul> </li> <li> <div class = "link">Author</div> <ul class = "desc"> <li><a href="#">Walk Monkey</a></li> <li><a href="#">Marlboro</a></li> </ul> </li> </ul> </body> <script> $(document).ready(function(){ $(‘.container li’).click(function(){ $(this).children(".desc").slideToggle(); }) /* $(‘.link:eq(0)’).click(function(){ var index=$(‘.desc:eq(0)’); index.slideToggle(); }) $(‘.link:eq(1)’).click(function(){ var index=$(‘.desc:eq(1)’); index.slideToggle(); }) $(‘.link:eq(2)’).click(function(){ var index=$(‘.desc:eq(2)’); index.slideToggle(); }) $(‘.link:eq(3)’).click(function(){ var index=$(‘.desc:eq(3)’); index.slideToggle(); }) */ }) </script> </html>

» 本文来自：前端开发者 » 《手风琴效果》

» 本文链接地址：https://www.rokub.com/8833.html

» 您也可以订阅本站：https://www.rokub.com