实例入门(简单展开或关闭)

来源:互联网 发布:nginx 访问隐藏目录 编辑:程序博客网 时间:2024/06/05 00:07
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" >
  3. <head>
  4.     <title>简直的展开或关闭</title>
  5.     <style type="text/css">
  6.         .hide{display:none;}
  7.         .show{display:block;}
  8.         .hand{cursor:pointer;}
  9.         .text{padding:10px;background:#F3FCFF;line-height:1.3em;border:solid 5px #B2DCF9;margin-bottom:7px;}
  10.     </style>
  11.     <script type="text/javascript">
  12.         /*根据点击项,动态加载内容至iframe中
  13.           expand(展开),e_d即expand div
  14.           container(容器),c即容器缩写
  15.           b为bool缩写
  16.           n为num缩写
  17.         */
  18.         function e_d(obj,n){//这二个参数构成iframe里的子页面。test1.htm/test2.htm/test3.htm
  19.           var c = obj.parentNode.nextSibling; /*取父级的下一个节点,跟父级同辈的。*/
  20.           var b = ( c.className == 'hide' );
  21.           obj.src = 'images/' + (b?'minus':'plus') + '.gif'/*变换+-图片*/
  22.           c.className=b?'text':'hide'
  23.           if(!c.innerHTML){//如果这一层里没有内容才更新。有内容则不变化
  24.             var str = '<iframe id="iframe' + n + '" src="test' + n + '.htm" scrolling="auto" frameborder="0" width="100%" height="100%"';
  25.             str += 'onload="this.style.height=iframe' + n + '.document.body.scrollHeight+30"></iframe>';
  26.             c.innerHTML = str;
  27.           }
  28.         }
  29.     </script>
  30. </head>
  31. <body>
  32. <div>
  33.     <div class="hand">
  34.         <img src="images/plus.gif" alt="展开" onclick='e_d(this,1)' />展开1
  35.     </div>
  36.     <div class="hide"></div>
  37. </div>
  38. <div>
  39.     <div class="hand">
  40.         <img src="images/plus.gif" alt="展开" onclick='e_d(this,2)' />展开2
  41.     </div>
  42.     <div class="hide"></div>
  43. </div>
  44. </body>
  45. </html>