用JavaScript就离不开jquery，事件链也必不可少。
下面的例子参考自《jQuery权威指南》
css中定义了一个框架元素，包含标题和内容。并设置内容初始不可见。
当用户单击Class名称为”title“的元素师，自身增加名称为”control“的样式；同时，将接下来的Class名称为”content“元素显示出来。
可以看出两个功能的实现通过”.“符号连接在一起。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .iframe{border:solid 1px #888;font-size: 13px;} 8 .title{padding: 6px;background-color: #EEE;} 9 .content{padding: 8px 0px;font-size: 12px;text-align: center;display: none;} 10 .curcul{background-color: #CCC;} 11 </style> 12 </head> 13 <body> 14 <div class="title">标题</div> 15 <div class="content"></div> 16 17 <script src="Script/jquery-2.0.3.js"></script> 18 <script type="text/javascript"> 19 // $(document).ready(function(){ 20 // $("div").html("Hello World"); 21 // }); 22 $(function(){ 23 $(".content").html("Hell wordl"); 24 $(".title").click(function(){ 25 $(this).addClass("curcul").next(".content").css("display","block"); 26 }); 27 }); 28 </script> 29 </body> 30 </html>