js这个功能怎么实现的?

xwyxwyujj 2009-02-11 10:50:28

http://www.souzz.net/online/dhtmlcn/objects/IFRAME.html
在上面这个网址里有一个图片按钮点展开全部的内容出来
再一点下折叠回复到原来的样式是怎么做的啊,,
多谢大家!

...全文

139 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

mzytechsupport 2009-02-11

打赏
举报

....右键点击查看源代码
你就可以发现。你看的参考的，每个导航都对应了个隐藏的div

你只要设置这个页面的div有右侧滚动条的样式.自动最好。

显示全部和显示局部只要设置div外面的parent标签的style，要么设置高度，要么就不要高度属性，这样自己就子元素撑大了

CutBug 2009-02-11

打赏
举报

大概的模仿上面的效果写了一个

<html> 

<head> 

<style type="text/css">

td{font-size:12px}

td.select{background-color:#eee}

td.noselect{background-color:#fff}

.hide{display:none}

.block{display:block}

</style>

<script language="javascript"> 

function resizeList(o)

{

    var definedH = "60px"

    var listDiv = document.getElementById("list");

    if(listDiv.style.height=="100%")

    {

        listDiv.style.height=definedH;

        listDiv.style.overflowY="scroll";

        o.value="+";

    }else

    {

        listDiv.style.height="100%";

        listDiv.style.overflowY="hidden";

        o.value="-";

    }

}



var curID="t0";//当前title

function show(o)

{

    var titleID = o.id;

    var cTbl = document.getElementById("content");

    var curObj = document.getElementById(curID);

    

    curObj.className="noselect";

    o.className="select";

    curID=o.id;

    if(titleID=="t0")//显示所有内容

    {

        for(var i=0;i<cTbl.rows.length;i++)

        {

            cTbl.rows[i].className="block";

        }

    }else //其他根据title显示

    {

        for(var i=0;i<cTbl.rows.length;i++)

        {

            cTbl.rows[i].className=(cTbl.rows[i].id.indexOf(titleID)==-1?"hide":"block");

        }

    }

}

</script> 

</head> 

<body> 



<table width="400px" border="1" cellpadding="0" cellspacing="2">

    <tr class="trFixed">

        <td colspan="2">

            <table style="width:100%">

                <tr>

                    <td>Refrence</td>

                    <td align="right"><input type="button" value="+" onclick="resizeList(this)"/></td>

                </tr>

            </table>

        </td>

    </tr>

    <tr>

        <td valign="top" width="100px">

            <table style="width:100%;cursor:hand" cellspacing="0" id="title">

                <tr>

                    <td class="select" id="t0" onclick="show(this)">标签属性/属性</td>

                </tr>

                <tr>

                    <td id="t1" onclick="show(this)">行为</td>

                </tr>

                <tr>

                    <td id="t2" onclick="show(this)">集合</td>

                </tr>

            </table>

        </td>

         <td>

            <div style="height:60px; overflow-y:scroll;margin:0" id="list" >

               <table style="width:100%;height:100%" id="content" border=1>

                    <tr id="t11">

                        <td>aaaa</td>

                    </tr>

                    <tr id="t12">

                        <td>aaaa</td>

                    </tr>

                    <tr id="t20">

                        <td>bbbbb</td>

                    </tr>

                    <tr id="t21">

                        <td>ccccc</td>

                    </tr>

                    <tr id="t22">

                        <td>ccccc</td>

                    </tr>

                    <tr id="t23">

                        <td>ccccc</td>

                    </tr>

               </table>

               </div>

        </td>

     </tr>

    

</table>

</body> 

</html>

Nobel0429 2009-02-11

打赏
举报

http://www.souzz.net/online/dhtmlcn/common/members.js
下载上面的JS 里面有代码

y042017 2009-02-11

打赏
举报

这是修改的IFRAM的高度来进行的一个现实！

ycguo 2009-02-11

打赏
举报

我是说楼主给的例子，至于楼主用<div>还是<iframe>另论

ycguo 2009-02-11

打赏
举报

做隐藏和显示的话岂不是要准备两个<div>，这个显示那个隐藏，那个显示这个隐藏，麻烦不麻烦，还得保证前半部分数据同步。

这个就是用Js控制<div>的overflow属性，点展开的时候document.getElementById("myDiv").style.overflow = "visible";点折叠的时候就是document.getElementById("myDiv").style.overflow = "auto";

wohaishiliumang 2009-02-11