html 代码 <!DOCTYPE <span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/html" title="html" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">html</a></span>><br /> <<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/html" title="html" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">html</a></span>><br /> <head><br /> <meta charset="utf-8"><br /> <title>手风琴demo</title><br /> <meta name="viewport" content="width=device-width,initial-scale=1.0"><br /> <meta name="description" content="Fengqin_Demo"><br /> <script type="text/javascript" src=’http://libs.baidu.com/<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/jquery" title="jquery" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">jquery</a></span>/2.0.0/<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/jquery" title="jquery" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">jquery</a></span>.<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/javascript" title="js" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">js</a></span>’></script><br /> <style><br /> *{<br /> margin: 0;<br /> padding:0;<br /> -webkit-box-sizing:border-box;<br /> -moz-box-sizing:border-box;<br /> box-sizing:border-box;<br /> }<br /> body{<br /> background: #191970;<br /> font-family: ‘Open Sans’, Arial, Helvetica, Sans-serif, Verdana, Tahoma;;<br /> }<br /> ul{<br /> list-style: none;<br /> }<br /> a{<br /> color:#FF4500;<br /> text-decoration: none;<br /> }</p> <p> .container{<br /> width:100%;<br /> max-width: 300px;<br /> margin: 20px auto 30px;<br /> border-radius: 4px;<br /> -webkit-border-radius: 4px;<br /> -moz-border-radius: 4px;<br /> background: #fff;<br /> }<br /> .container .link{<br /> cursor: pointer;<br /> color: #292421;<br /> padding: 15px 15px 15px 50px;<br /> font-size:14px;<br /> font-weight: 700;<br /> border-bottom: 1px solid #ccc;<br /> -webkit-transition: all 0.4s ease;<br /> -o-transition: all 0.4s ease;<br /> transition: all 0.4s ease;<br /> }<br /> .container li.open .link{<br /> color:#ED9121;<br /> }<br /> .container li:last-child .link{<br /> border-bottom: 0;<br /> }</p> <p> .desc{<br /> background: #3D59AB;<br /> font-size: 14px;<br /> display: none;<br /> }<br /> .desc li{<br /> border-bottom: 1px solid #ccc;<br /> }<br /> .desc li:last-child{<br /> border-bottom: 0;<br /> }<br /> .desc a{<br /> display: block;<br /> padding:12px;<br /> padding-left: 50px;<br /> color: #808A87;<br /> -webkit-transition: all 0.25s ease;<br /> -o-transition: all 0.25s ease;<br /> transition: all 0.25s ease;</p> <p> }<br /> .desc a:hover{<br /> background: #1E90FF;<br /> color: #fff;<br /> }<br /> </style><br /> </head><br /> <body><br /> <ul class = "container"><br /> <li><br /> <div class = "link">Html</div><br /> <ul class = "desc"><br /> <li><a href="#">Html</a></li><br /> <li><a href="#"><span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/css" title="css" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">css</a></span></a></li><br /> </ul><br /> </li><br /> <li><br /> <div class = "link">Javascript</div><br /> <ul class = "desc"><br /> <li><a href="#">Javascript</a></li><br /> <li><a href="#"><span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/jquery" title="jquery" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">jquery</a></span></a></li><br /> <li><a href="#">Zepto</a></li><br /> <li><a href="#">Require</a></li><br /> </ul><br /> </li><br /> <li><br /> <div class = "link">Browser</div><br /> <ul class = "desc"><br /> <li><a href="#">Firefox</a></li><br /> <li><a href="#">Chrome</a></li><br /> <li><a href="#">Safari</a></li><br /> </ul><br /> </li><br /> <li><br /> <div class = "link">Author</div><br /> <ul class = "desc"><br /> <li><a href="#">Walk Monkey</a></li><br /> <li><a href="#">Marlboro</a></li><br /> </ul><br /> </li><br /> </ul></p> <p></body><br /> <script><br /> $(document).ready(function(){</p> <p> $(‘.container li’).click(function(){<br /> $(this).children(".desc").slideToggle();<br /> })</p> <p> /* $(‘.link:eq(0)’).click(function(){<br /> var index=$(‘.desc:eq(0)’);<br /> index.slideToggle();<br /> })<br /> $(‘.link:eq(1)’).click(function(){<br /> var index=$(‘.desc:eq(1)’);<br /> index.slideToggle();<br /> })<br /> $(‘.link:eq(2)’).click(function(){<br /> var index=$(‘.desc:eq(2)’);<br /> index.slideToggle();<br /> })<br /> $(‘.link:eq(3)’).click(function(){<br /> var index=$(‘.desc:eq(3)’);<br /> index.slideToggle();<br /> }) */</p> <p> })</p> <p></script></p> <p></html> » 本文来自：前端开发者 » 《手风琴效果》 » 本文链接地址：https://www.rokub.com/8833.html » 您也可以订阅本站：https://www.rokub.com
前端开发者
评论前必须登录！
注册