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

最新推荐文章于 2023-10-27 12:25:16 发布

greatverve

最新推荐文章于 2023-10-27 12:25:16 发布

阅读量467

点赞数

分类专栏： JavaScript学习文章标签： iframe c

本文链接：https://blog.csdn.net/greatverve/article/details/3291146

版权

JavaScript学习专栏收录该内容

42 篇文章 0 订阅

订阅专栏

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>简直的展开或关闭</title>
    <style type="text/css">
        .hide{display:none;}
        .show{display:block;}
        .hand{cursor:pointer;}
        .text{padding:10px;background:#F3FCFF;line-height:1.3em;border:solid 5px #B2DCF9;margin-bottom:7px;}
    </style>
    <script type="text/javascript">
        /*根据点击项，动态加载内容至iframe中
          expand(展开),e_d即expand div
          container(容器),c即容器缩写
          b为bool缩写
          n为num缩写
        */
        function e_d(obj,n){//这二个参数构成iframe里的子页面。test1.htm/test2.htm/test3.htm 
          var c = obj.parentNode.nextSibling; /*取父级的下一个节点,跟父级同辈的。*/
          var b = ( c.className == 'hide' );
          obj.src = 'images/' + (b?'minus':'plus') + '.gif'/*变换+-图片*/
          c.className=b?'text':'hide'
          if(!c.innerHTML){//如果这一层里没有内容才更新。有内容则不变化 
            var str = '<iframe id="iframe' + n + '" src="test' + n + '.htm" scrolling="auto" frameborder="0" width="100%" height="100%"';
            str += 'οnlοad="this.style.height=iframe' + n + '.document.body.scrollHeight+30"></iframe>';
            c.innerHTML = str;
          }
        }
    </script>
</head>
<body>
<div>
    <div class="hand">
        <img src="images/plus.gif" alt="展开" οnclick='e_d(this,1)' />展开1
    </div>
    <div class="hide"></div>
</div>
<div>
    <div class="hand">
        <img src="images/plus.gif" alt="展开" οnclick='e_d(this,2)' />展开2
    </div>
    <div class="hide"></div>
</div>
</body>
</html>
 

greatverve

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实例入门(简单展开或关闭)

"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">"http://www.w3.org/1999/xhtml" > 简直的展开或关闭 "text/css"> .hide{display:no
复制链接

扫一扫

专栏目录