好像是个简单的问题，大家看看

呵呵，我也不知道怎么提问，
我的问题是，网页的一行线一点击就出来一些文字(好几行的)
再点那个横线有合住了
就是能把好几行的文字隐藏到那条线了，
求个例子

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
        <title>Select</title>
        <script type="text/javascript" src="js/prototype-1.6.0.3.js">
        </script>
        <script type="text/javascript">
            function action(m){
                content = $(m.id + '_content');
                if (content.style.display == 'none') {
                    content.style.display = '';
                }
                else {
                    content.style.display = 'none';
                }

            }
        </script>    </head>
    <body>
        <div id="d1" style="top:20px; left:100px; width:200px; height:500px">
            <div id="d_head" style="height:20px">
                Menu
            </div>
            <div id="d_body" align="left" style="height:400px">
                <ul class="menu">
                    <li>                        <span id="m1" onclick="action(this);">Core Java</span>
                    </li>
                    <ul id="m1_content" style="display:none">
                        <li>
                            <a href="#">Language</a>
                        </li>
                        <li>
                            <a href="#">IO</a>                        </li>
                        <li>
                            <a href="#">Thread</a>
                        </li>
                    </ul>
                    <li>
                        <span id="m2" onclick="action(this);">Web Client</span>
                    </li>                    <ul id="m2_content" style="display:none">
                        <li>
                            <a href="#">JavaScript</a>
                        </li>
                        <li>
                            <a href="#">HTML</a>
                        </li>
                        <li>                            <a href="#">CSS</a>
                        </li>
                    </ul>
                    <li>
                        <span id="m3" onclick="action(this);">Web Server</span>
                    </li>
                    <ul id="m3_content" style="display:none">
                        <li>                            <a href="#">JDBC</a>
                        </li>
                        <li>
                            <a href="#">Servlet/JSP</a>
                        </li>
                        <li>
                            <span id="m31" onclick="action(this);">Framewroks</span>                        </li>
                        <ul id="m31_content" style="display:none">
                            <li>
                                <a href="#">Struts</a>
                            </li>
                            <li>
                                <a href="#">Hibernate</a>
                            </li>                            <li>
                                <a href="#">Spring</a>
                            </li>
                        </ul>
                        <li>
                            <a href="#">Web Service</a>
                        </li>
                    </ul>                </ul>
            </div>
        </div>
    </body>
</html>
<!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" lang="gb2312">
<head>
<title>abc</title>
<script>
function abc(){
    var a = document.getElementById("abc");
    var height = parseInt(a.style.height);
    if(height==30){
      a.style.height = "60px";
    }else{
      a.style.height = "30px";
    }
}
</script>
</head>
<body>
<div id="abc" style="height:30px;overflow:hidden">
abcdefg<BR>
<HR onclick="abc()">
ssssss
</div>
</body>
</html>
<html>
<head>
<script language="javascript">
function show(){
var bb=document.getElementById("bb").style.display;
if(bb=="none"){
document.getElementById("bb").style.display="";
document.getElementById("aa").title="点击隐藏";
}else{
document.getElementById("bb").style.display="none";
document.getElementById("aa").title="点击显示";
}
}
</script>
</head>
<body>
提示: 点击下面的横线显示内容.
<div id="aa" style="border:1px solid balck;cursor:hand;margin-top:5px;padding:0px" title="点击显示" onClick="show()"></div>
<div id="bb" style="margin:0px;padding:5px;border:1px solid black;display:none">
这里是隐藏的内容这里是隐藏的内容这里是隐藏的内容<br>
这里是隐藏的内容这里是隐藏的内容这里是隐藏的内容<br>
这里是隐藏的内容这里是隐藏的内容这里是隐藏的内容<br>
这里是隐藏的内容这里是隐藏的内容这里是隐藏的内容<br>
这里是隐藏的内容这里是隐藏的内容这里是隐藏的内容
</div>
</body>
</html>
代码看这吧，http://www.rc0359.com/rc_news.asp这里有，希望对你有帮助！！
<script language="javascript">
function show(_this){
var h=parseInt(_this.name)
if (!_this.name){
_this.style.overflow="visible";
h=_this.offsetHeight
_this.style.overflow="hidden";
_this.name=h
}
if (_this.title!="点击隐藏"){
_this.title="点击隐藏"
openMe(_this,1,h)
}
else{
_this.title="点击显示"
openMe(_this,-1,2)
}
}
function openMe(_this,k,m){
var h=_this.offsetHeight
if (h>m&&k<0 || h<m&&k>0){
_this.style.height=h+k+"px"
setTimeout (function(){openMe(_this,k,m)},1)
}
}
</script>
<div style="height:2px;cursor:hand;border-top:1px red solid;width:600px;overflow:hidden;padding:5px;" title="点击显示" onClick="show(this)">
隐藏内容<br>
隐藏内容<br>
隐藏内容<br>
</div>
<br>
<div style="height:2px;cursor:hand;border-top:1px red solid;width:600px;overflow:hidden;padding:5px;" title="点击显示" onClick="show(this)">
隐藏内容<br>
隐藏内容<br>
隐藏内容<br>
</div>