（HTML、JavaScript？）有一段文字，如何实现“收缩”不显示、点击才显示？

（HTML、JavaScript？）有一段文字，如何实现“收缩”不显示、点击才显示？比如有标题1（详情点击显示）内容1内容1内容1其实，这些内容是在一篇文章中，但默认只显... （HTML、JavaScript？）有一段文字，如何实现“收缩”不显示、点击才显示？
比如有

标题1（详情点击显示）

内容1内容1内容1

其实，这些内容是在一篇文章中，但默认只显示“标题1（详情点击显示）”，如果读者对“标题1”的内容感兴趣，只要点击它，就会将“内容1内容1内容1”显示出来，我知道“JavaScript下拉菜单”，不知道是否能类似“JavaScript下拉菜单”那样来展示我的内容？（因为文章内容比较长，要将重点（即段落标题）显示出来，若读者感兴趣再点击查看，否则内容太长可能会引起读者的反感）

如果可以，请给一下代码，非常感谢！展开

 我来答

4个回答

#合辑# 机票是越早买越便宜吗？

yuewutao
2010-08-02 · TA获得超过155个赞

知道小有建树答主

回答量：141

采纳率：0%

帮助的人：99.4万

我也去答题访问个人页

关注

展开全部

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="keywords" content="">
<style type=text/css>

table { border:0px; }
td { font:normal 12px 宋体; }
img { vertical-align:bottom; border:0px; }

a { font:normal 12px 宋体; color:#215DC6; text-decoration:none; }
a:hover { color:#428EFF }

/*
展开层的样式
**/
.sec_menu { border-left:1px solid #000000; border-right:1px solid white; border-bottom:1px solid white; overflow:hidden; background:#D6DFF7; }

/*
根节点字体样式控制
**/
.menu_title span { position:relative; top:2px; left:8px; color:#215DC6; font-weight:bold; }
.menu_title2 span { position:relative; top:2px; left:8px; color:#428EFF; font-weight:bold; }

</style>
<script language=javascript>
function menuShow(obj,maxh,obj2)
{
if(obj.style.pixelHeight<maxh)
{
obj.style.pixelHeight+=maxh/20;
obj.filters.alpha.opacity+=5;
obj2.background="image/menudown.gif";
if(obj.style.pixelHeight==maxh/10)
obj.style.display='block';
myObj=obj;
myMaxh=maxh;
myObj2=obj2;
setTimeout('menuShow(myObj,myMaxh,myObj2)','5');
}
}
function menuHide(obj,maxh,obj2)
{
if(obj.style.pixelHeight>0)
{
if(obj.style.pixelHeight==maxh/20)
obj.style.display='none';
obj.style.pixelHeight-=maxh/20;
obj.filters.alpha.opacity-=5;
obj2.background="image/menuup.gif";
myObj=obj;
myMaxh=maxh
myObj2=obj2;
setTimeout('menuHide(myObj,myMaxh,myObj2)','5');
}
else
if(whichContinue)
whichContinue.click();
}
function menuChange(obj,maxh,obj2)
{
if(obj.style.pixelHeight)
{
menuHide(obj,maxh,obj2);
whichOpen='';
whichcontinue='';
}
else
if(whichOpen)
{
whichContinue=obj2;
whichOpen.click();
}
else
{
menuShow(obj,maxh,obj2);
whichOpen=obj2;
whichContinue='';
}
}
</script>
<base target=main>
</head>

<body onselectstart="return false;" ondragstart="return false;" oncontextmenu="return false;">

<table width=158 border="0" align=center cellpadding=0 cellspacing=0>
<tr style="cursor:hand;">
<td height=25 background=image/menudown.gif class=menu_title id=menuTitle1 onClick="menuChange(menu1,80,menuTitle1);" onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title';>
<span>系统选项</span>
</td>
</tr>
<tr>
<td>
<div class=sec_menu style="width:158px;height:80px;filter:alpha(Opacity=100);overflow:hidden;" id=menu1>
<table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;">
<tr>
<td height=20>
<img src="image/nofollow.gif" width="15" height="15"><a href=../../3our.com/index.html onfocus=this.blur();>安全选项</a>
</td>
</tr>
<tr>
<td height=20>
<img src="image/nofollow.gif" width="15" height="15"><a href=../../3our.com/index.html onfocus=this.blur();>垃圾邮件选项</a>
</td>
</tr>
<tr>
<td height=20>
<img src="image/nofollow.gif" width="15" height="15"><a href=../../3our.com/index.html onfocus=this.blur();>
动态规则选项</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<script language=javascript>
var whichOpen=menuTitle1;
var whichContinue='';
</script>

<table width=158 border="0" align=center cellpadding=0 cellspacing=0>
<tr style="cursor:hand;">
<td height=25 background=image/menuup.gif class=menu_title id=menuTitle2 onClick="menuChange(menu2,120,menuTitle2);" onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title';>
<span>系统规则</span>
</td>
</tr>
<tr>
<td>
<div class=sec_menu style="width:158;height:0;filter:alpha(Opacity=0);display:none;" id=menu2>
<table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;">
<tr>
<td height=20>
<img src=image/nofollow.gif><a href=../../3our.com/index.html onfocus=this.blur();>
IP过滤规则</a>
</td>
</tr>
<tr>
<td height=20>
<img src=image/nofollow.gif><a href=../../3our.com/index.html onfocus=this.blur();>
信封过滤规则</a>
</td>
</tr>
<tr>
<td height=20>
<img src=image/nofollow.gif><a href=../../3our.com/index.html onfocus=this.blur();>
信头过滤规则</a>
</td>
</tr>
<tr>
<td height=20>
<img src=image/nofollow.gif><a href=../../3our.com/index.html onfocus=this.blur();>
信体过滤规则</a>
</td>
</tr>
<tr>
<td height=20>
<img src=image/nofollow.gif><a href=../../3our.com/index.html onfocus=this.blur();>
附件过滤规则</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<table width=158 border="0" align=center cellpadding=0 cellspacing=0>
<tr style="cursor:hand;">
<td height=25 background=image/menuup.gif class=menu_title id=menuTitle3 onClick="menuChange(menu3,120,menuTitle3);" onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title';>
<span>系统管理</span>
</td>
</tr>
<tr>
<td>
<div class=sec_menu style="width:158;height:0;filter:alpha(Opacity=0);display:none;" id=menu3>
<table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;">
<tr>
<td height=20>
<img src=image/nofollow.gif><a href=../../3our.com/index.html onfocus=this.blur();>
用户管理</a>
</td>
</tr>
<tr>
<td height=20>
<img src=image/nofollow.gif><a href=../../3our.com/index.html onfocus=this.blur();>
进程管理</a>
</td>
</tr>
<tr>
<td height=20>
<img src=image/nofollow.gif><a href=../../3our.com/index.html onfocus=this.blur();>
主机运行状态</a>
</td>
</tr>
<tr>
<td height=20>
<img src=image/nofollow.gif><a href=../../3our.com/index.html onfocus=this.blur();>
数据备份</a>
</td>
</tr>
<tr>
<td height=20>
<img src=image/nofollow.gif><a href=../../3our.com/index.html onfocus=this.blur();>
垃圾目录管理</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>

<table width=158 border="0" align=center cellpadding=0 cellspacing=0>
<tr style="cursor:hand;">
<td height=25 background=image/menuup.gif class=menu_title id=menuTitle4 onClick="menuChange(menu4,140,menuTitle4);" onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title';>
<span>系统统计</span>
</td>
</tr>
<tr>
<td>
<div class=sec_menu style="width:158;height:0;filter:alpha(Opacity=0);display:none;" id=menu4>
<table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;">
<tr>
<td height=20>
<img src=image/nofollow.gif><a href=../../3our.com/index.html onfocus=this.blur();>
IP过滤统计</a>
</td>
</tr>
<tr>
<td height=20>
<img src=image/nofollow.gif><a href=../../3our.com/index.html onfocus=this.blur();>
信封过滤统计</a>
</td>
</tr>
<tr>
<td height=20>
<img src=image/nofollow.gif><a href=../../3our.com/index.html onfocus=this.blur();>
信头过滤统计</a>
</td>
</tr>
<tr>
<td height=20>
<img src=image/nofollow.gif><a href=../../3our.com/index.html onfocus=this.blur();>
信体过滤统计</a>
</td>
</tr>
<tr>
<td height=20>
<img src=image/nofollow.gif><a href=../../3our.com/index.html onfocus=this.blur();>
附件过滤统计</a>
</td>
</tr>
<tr>
<td height=20>
<img src=image/nofollow.gif><a href=../../3our.com/index.html onfocus=this.blur();>
动态规则统计</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>

以前用过的，你看下可以不

已赞过 已踩过<

评论收起

yang163_yang
2010-08-03 · TA获得超过499个赞

知道小有建树答主

回答量：207

采纳率：0%

帮助的人：263万

我也去答题访问个人页

关注

展开全部

<html>
<style type="text/css">
<!--
.p1 {
 cursor:hand;
}
-->
</style>

<body>
<div class="p1" id="p1" onClick="javascript:document.getElementById('c1').style.display=document.getElementById('c1').style.display==''?'none':''">标题：大姨妈</div>
<div id="c1" style="display: none">
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
<div>其他其他其他</div>
<div class="p1" id="p2" onClick="javascript:document.getElementById('c2').style.display=document.getElementById('c2').style.display==''?'none':''">标题：大姨妈2</div>
<div id="c2" style="display: none">
2内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</body>
</html>
有手了。


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

冷库软件
2010-08-02 · TA获得超过889个赞

知道小有建树答主

回答量：1672

采纳率：0%

帮助的人：1196万

我也去答题访问个人页

关注

展开全部

this.innerHTML=='展开标签' ? (this.innerHTML='收起标签',$('#bqC').show()) :(this.innerHTML='展开标签',$('#bqC')).hide();return false

已赞过 已踩过<

评论收起

鲜少老师
2010-08-02 · TA获得超过527个赞

知道小有建树答主

回答量：630

采纳率：0%

帮助的人：377万

我也去答题访问个人页

关注

展开全部

我用JS的框架JQUERY给你写一个，你看看吧！把你的邮箱给我，我给你传一个！
（北京八方永信网站前端工程师）

已赞过 已踩过<

评论收起

1条折叠回答

更多回答（2）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

（HTML、JavaScript？）有一段文字，如何实现“收缩”不显示、点击才显示？

其他类似问题

为你推荐：