用户点击标题后展开图层内容显示，当再次点击时图层隐藏，常用于问题页面点击标题显示答案效果。
<!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>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>点击标题弹出下拉图层内容显示效果_武鸣人</title>
<style type="text/css">
body{
margin:30px auto;
}
ul{
list-style:none;
}
#wuming_ren{
font-size:12px;
width:800px;
}
#wuming_ren li{
margin:0 0 10px;
padding:0 0 5px;
}
#wuming_ren dl{
margin:0;
padding:0;
display:inline;
}
#wuming_ren dt{
font-weight:bold;
cursor:pointer;
line-height:20px;
padding:0 0 5px 22px;
border-bottom:1px #ccc dotted;
}
#wuming_ren dd{
display:none;
margin:0;
padding:5px 0 5px 20px;
background:#E5ECF9;
line-height:180%;
}
</style>
<script type="text/javascript">
var lastFaqClick=null;//上次点击的wuming_ren
window.onload=function(){
var wuming_ren=document.getElementById("wuming_ren");
var dls=wuming_ren.getElementsByTagName("dl");
for (var i=0,dl;dl=dls[i];i++){
var dt=dl.getElementsByTagName("dt")[0];//取得标题
dt.id = "wuming_ren_dt_"+(Math.random()*100);
dt.onclick=function(){
var p=this.parentNode;//取得父节点
if (lastFaqClick!=null&&lastFaqClick.id!=this.id){
var dds=lastFaqClick.parentNode.getElementsByTagName("dd");
for (var i=0,dd;dd=dds[i];i++)
dd.style.display='none';
}
lastFaqClick=this;
var dds=p.getElementsByTagName("dd");//取得该父节点所有的子节点，也就是所有的答案
var tmpDisplay='none';
if (gs(dds[0],'display')=='none')
tmpDisplay='block';
for (var i=0;i<dds.length;i++)
dds[i].style.display=tmpDisplay;
}
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
/**
*取得元素的真实css属性
*/
function gs(d,a){
if (d.currentStyle){
var curVal=d.currentStyle[a]
}else{
var curVal=document.defaultView.getComputedStyle(d, null)[a]
}
return curVal;
}
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<ul id="wuming_ren">
<li>
<dl>
<dt>IE6的双倍间距问题，该怎么办？</dt>
<dd><strong>引发原因：</strong>对元素使用了浮动float后，并且使用了margin-left或者margin-right，在IE6中往往会容易引发双倍间距的问题。<br/>
<strong>解决方法：</strong>对使用浮动float的元素多添加一个display:inline;即可，当然也可以麻烦点，使用针对IE6的hack，减少margin-left和margin-right的数值（一半）。</dd>
</dl>
</li>
<li>
<dl>
<dt>为什么IE6中使用PNG图片的时候，背景是灰的，而其他浏览器却是透明的？</dt>
<dd><strong>引发原因：</strong>因为IE6对PNG-24格式的图片支持的不是很好，尤其是带alpha通道的图片。<br>
<strong>解决方法：</strong><br>
1) 不使用带alpha通道的png-24格式的图片，而使用png-8格式的图片。<br>
2) 对于一定要使用alpha透明的图片的话，可以用flash，也可以用其他方法，具体请查看gulu77整理的《IE6支持PNG透明(alpha通道)的4种方法》。 </dd>
</dl>
</li>
<li>
<dl>
<dt>为什么页面很乱，下面的内容都跑到上面来了呢？</dt>
<dd><strong>引发原因：</strong>当一个元素浮动后，就会让该元素旁边的以及下面的元素都产生位置的变化。<br>
<strong>解决方法：</strong>清除该元素的浮动。</dd>
</dl>
</li>
<li>
<dl>
<dt>为什么高度不会自适应呢？</dt>
<dd><strong>引发原因：</strong>当一个元素浮动以后，或者是没有设置高度的时候，往往会出现高度无法自适应的情况。<br>
<strong>解决方法：</strong>如果高度没有设置或者是设置了height:auto;的话，那么可以使用overflow:hidden;来达到高度自适应的方法。</dd>
</dl>
</li>
<li>
<dl>
<dt>div中的内容被FLASH挡住了？</dt>
<dd><strong>引发原因：</strong>FLASH在页面中的级别相对来说比其他元素都要高，就算设置了position后并且带有z-index也还是会出现这样的问题。<br>
<strong>解决方法：</strong>记得以前解决这个方法的时候是使用iframe这个更搞级别的标签元素来解决的，不过后来发现了另外一个方法，就是给FLASH设置透明就可以了。可以参考《标准的FLASH插入代码》一文，这个是当初在PR的博客上看到的。</dd>
</dl>
</li>
<li>
<dl>
<dt>如何隐藏文字（一般用特殊的漂亮的背景图片替代）？</dt>
<dd>以下的代码只是简要说明一下如何隐藏一个文字，具体的使用方法大家可以根据自己需要来使用，基本上都是利用让文字超出边界然后overflow:hidden;来实现，当然是在块元素内才可以（程序代码：<h3>这个文字我想隐藏的，怎么办</h3>）。<br>
<p><strong>A、添加标签，隐藏标签内容</strong><br>
<h3><span style="display:none;">那就多添加一个标签，然后display:none不就隐藏了么</span></h3></p>
<p><strong>B、text-indent:-9999px;利用text-indent将文字推出块区域</strong><br>
<h3 style="width:200px;text-indent:-9999px;overflow:hidden;">文字被推出去了哦</h3></p>
<p><strong>C、利用行高来隐藏文字</strong><br>
<h3 style="width:200px;height:25px;overflow:hidden;line-height:250px;font-size:0;content:'';">文字是不是又不见了啊，嘻嘻</h3></p>
<p><strong>D、利用背景色来隐藏文字</strong><br>
<h3 style="color:#FFFFFF;backgroud-color:#FFFFFF">文字跟背景色相同，那就看不到了，不过好像没什么实际性的意义</h3></p>
<p><strong>E、利用其他模块来隐藏文字</strong><br>
<h3 style="width:200px;height:25px;">这个是标题</h3><br>
<div style="width:200px;height:300px;margin-top:-25px;padding-top:25px;background-color:#FFFFFF">利用margin-top负边距来将内容区域提升上去覆盖标题区域，然后用padding-top来实现原有的标题区域的范围，可以用背景图片来做得更漂亮点，但具体的要结合实际情况来实现</div></p>
</dd>
</dl>
</li>
</ul>
</body>
</html>本文来自武鸣人网站，转载请注明出处