js控制层的隐藏显示,帮忙修改下一下代码,默认让“栏目一”显示,“栏目二”和“栏目三”隐藏?

<style>#foldbar{margin-left:130px;;cursor:pointer;display:inline}</style><script>varf... <style>
#foldbar {margin-left:130px;;cursor:pointer;display:inline}
</style>
<script>
var foldimg="\+"
var puckimg="-"
function fold(o){
var show = o.innerHTML==foldimg?true:false;
o.innerHTML=show?puckimg:foldimg;
obj = document.getElementById(o.parentNode.id+"_content")
obj.style.overflow = "hidden"
obj.style.display = "block"
if(!obj.h){
obj.h=obj.offsetHeight
obj.style.height=obj.h
}
playfold(obj,show)
}
playfold = function(o,show){
var h=10;//px
var time=10;//ms
var timer=window.setTimeout(function(){playfold(o,show)},10);
if(parseInt(o.style.height)<o.h&&show){
o.style.height = parseInt(o.style.height)+h+"px";
}else if(parseInt(o.style.height)>0&&!show){
var fh = parseInt(o.style.height)-h
fh = fh>0?fh:0;
o.style.height = fh+"px";
if(!fh)o.style.display = "none";
}else{
window.clearTimeout(timer);
}
}
</script>
<table width="200" border="1">
<tr>
<td id="title_1">栏目1<span id=foldbar onclick=fold(this)>-</span></td>
</tr>
<tr>
<td><div id="title_1_content">用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果</div></td>
</tr>
<tr>
<td id="title_2">栏目2<span id=foldbar onclick=fold(this)>-</span></td>
</tr>
<tr>
<td><div id="title_2_content">用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果</div></td>
</tr>
<tr>
<td id="title_3">栏目3<span id=foldbar onclick=fold(this)>-</span></td>
</tr>
<tr>
<td><div id="title_3_content">用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果</div></td>
</tr>
</table>
展开
 我来答
fjyrjjsjsp
推荐于2016-02-07 · TA获得超过188个赞
知道答主
回答量:79
采纳率:0%
帮助的人:88.6万
展开全部
<style>
#foldbar {margin-left:130px;;cursor:pointer;display:inline}
</style>
<script>
var foldimg="\+"
var puckimg="-"
window.onload = function(){
title_2_content.style.display="none";
title_3_content.style.display="none";
}
function fold(o){
var show = o.innerHTML==foldimg?true:false;
o.innerHTML=show?puckimg:foldimg;
obj = document.getElementById(o.parentNode.id+"_content")
obj.style.overflow = "hidden"
obj.style.display = "block"
if(!obj.h){
obj.h=obj.offsetHeight
obj.style.height=obj.h
}
playfold(obj,show)
}
playfold = function(o,show){
var h=10;//px
var time=10;//ms
var timer=window.setTimeout(function(){playfold(o,show)},10);
if(parseInt(o.style.height)<o.h&&show){
o.style.height = parseInt(o.style.height)+h+"px";
}else if(parseInt(o.style.height)>0&&!show){
var fh = parseInt(o.style.height)-h
fh = fh>0?fh:0;
o.style.height = fh+"px";
if(!fh)o.style.display = "none";
}else{
window.clearTimeout(timer);
}
}
</script>
<table width="200" border="1">
<tr>
<td id="title_1">栏目1<span id=foldbar onclick=fold(this)>-</span></td>
</tr>
<tr>
<td><div id="title_1_content">用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果</div></td>
</tr>
<tr>
<td id="title_2">栏目2<span id=foldbar onclick=fold(this)>+</span></td>
</tr>
<tr>
<td><div id="title_2_content">用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果</div></td>
</tr>
<tr>
<td id="title_3">栏目3<span id=foldbar onclick=fold(this)>+</span></td>
</tr>
<tr>
<td><div id="title_3_content">用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果</div></td>
</tr>
</table>
lxny2008
2012-08-30 · TA获得超过164个赞
知道小有建树答主
回答量:185
采纳率:100%
帮助的人:87.3万
展开全部
重点是在><div id="title_2_content">
标签处添加style属性 如:<div id="title_2_content" style="display:none">
栏目2的右边的 - 减号变 + 加号 ,如
<td id="title_2">栏目2<span id=foldbar onclick=fold(this)>+</span></td>

下面是完整代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<style>
#foldbar {margin-left:130px;;cursor:pointer;display:inline}
</style>
<script>
var foldimg="\+"
var puckimg="-"
function fold(o){
var show = o.innerHTML==foldimg?true:false;
o.innerHTML=show?puckimg:foldimg;
obj = document.getElementById(o.parentNode.id+"_content")
obj.style.overflow = "hidden"
obj.style.display = "block"
if(!obj.h){
obj.h=obj.offsetHeight
obj.style.height=obj.h
}
playfold(obj,show)
}
playfold = function(o,show){
var h=10;//px
var time=10;//ms
var timer=window.setTimeout(function(){playfold(o,show)},10);
if(parseInt(o.style.height)<o.h&&show){
o.style.height = parseInt(o.style.height)+h+"px";
}else if(parseInt(o.style.height)>0&&!show){
var fh = parseInt(o.style.height)-h
fh = fh>0?fh:0;
o.style.height = fh+"px";
if(!fh)o.style.display = "none";
}else{
window.clearTimeout(timer);
}
}
</script>
<table width="200" border="1">
<tr>
<td id="title_1">栏目1<span id=foldbar onclick=fold(this)>-</span></td>
</tr>
<tr>
<td><div id="title_1_content" style="display:block">用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果</div></td>
</tr>
<tr>
<td id="title_2">栏目2<span id=foldbar onclick=fold(this)>+</span></td>
</tr>
<tr>
<td><div id="title_2_content" style="display:none">用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果</div></td>
</tr>
<tr>
<td id="title_3">栏目3<span id=foldbar onclick=fold(this)>+</span></td>
</tr>
<tr>
<td><div id="title_3_content" style="display:none">用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果</div></td>
</tr>
</table>
</body>
</html>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
wuhuilong123
2012-08-21 · TA获得超过327个赞
知道小有建树答主
回答量:574
采纳率:0%
帮助的人:347万
展开全部
$("#title_1_content").show();
$("#title_2_content").hide();
$("#title_3_content").hide();
追问
不行啊
追答
你要引用JQUERY啊   大哥,你写的全部都是JS 肯定就没有引用  JQUERY嘛
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式