jquery事件处理之提供更多链接-展开和收缩利用toggle 和 show hide

1。

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 4 <html>
 5     <head>
 6         <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 7         <title>事件处理之提供更多链接</title>
 8         <style type="text/css">
 9             .readmore {
10                 color: blue;
11                 font-size: 0.8em;
12                 font-style: italic;
13                 text-decoration: underline;
14             }
15         </style>
16         <script src="jquery-1.5.2.js" type="text/javascript"></script>
17         <script type="text/javascript">
18             $(document).ready(function(){
19                 /*
20                  * .show(speed, callback)
21                  * speed可以取slow、normal、fast三种
22                  * callback是动画完成时回调的函数
23                  * .hide同上
24                  */
25                 $('.message').hide();
26                 $('span.readmore').toggle(
27                     function(){
28                         $('.message').show('slow');
29                         $(this).html('<pre>Read Less...</pre>');
30                     },
31                     function(){
32                         $('.message').hide('slow');
33                         $(this).html('<pre>Read More...</pre>');
34                     }
35                 );
36                 //$('span.readmore').click(function(){
37                     //$('.message').show('fast');
38                     //$(this).hide();
39                 //});
40             
41             });
42         </script>
43         <body>
44             <div>Style makes formatting job more easier</div>
45             <span class="readmore"><pre>Read More...</pre></pre></span>
46             <div class="message">
47                 To give an attractive look to a web site, you should have a good knowledge of style use.
48                 And it's also necessary to gain some knowlege of JS and jQuery.
49             </div>
50         </body>
51 </html>

posted on 2017-01-21 22:39 Sharpest 阅读(193) 评论(0) 收藏举报

jquery事件处理之提供更多链接-展开和收缩 利用toggle 和 show hide

jquery事件处理之提供更多链接-展开和收缩利用toggle 和 show hide