| 标题 | jquery实现展开关闭层的方法 |
| 内容 | 这篇文章主要介绍了jquery实现展开关闭层的方法,实例分析了jquery的slidetoggle方法使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现展开关闭层的方法。分享给大家供大家参考。具体实现方法如下： 代码如下: <!doctype html public -//w3c//dtd xhtml 1.0 transitional//en > <html xmlns=> <head> <title>jquery打造的展开/关闭层效果</title> <script type=text/javascript src=/images/jquery.js></script> <script type=text/javascript> $(function() { $(#mostrar).click(function(event) { event.preventdefault(); $(#caja).slidetoggle(); }); $(#caja a).click(function(event) { event.preventdefault(); $(#caja).slideup(); }); }); </script> <style type=text/css> body { font-family: verdana, arial, helvetica, sans-serif; font-size: 11px; color: #666666; } a{color:#993300; text-decoration:none;} #caja { width:70%; display: none; padding:5px; border:2px solid #fadda9; background-color:#fdf4e1; } #mostrar{ display:block; width:70%; padding:5px; border:2px solid #d0e8f4; background-color:#ecf8fd; } </style> </head> <body> <a href=# id=mostrar>点击展开详细……（若效果失效 ，请刷新本页面，载入jquery后就正常了！）</a> <div id=caja> <a href=# class=close>[x]关闭</a> <p>lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. at vero eos et accusam et justo duo dolores et ea rebum. stet clita kasd gubergren</p> </div> </body> </html> 希望本文所述对大家的jquery程序设计有所帮助。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。