JS树形伸展收缩菜单
希望有朋友能帮忙提供一个树形伸展收缩菜单效果跟这样的就可以http://www.zzsky.cn/effect/content/1550.htm但是需要可以默认展开一个，...
希望有朋友能帮忙提供一个树形伸展收缩菜单
效果跟这样的就可以http://www.zzsky.cn/effect/content/1550.htm
但是需要可以默认展开一个，而默认展开的这个可以指定。
谢谢！在线等！
兄弟，是有问题的啊，默认打开的是第2个，这时你点第1或第3个第2个不会收回去
我如何通过传递参数来确定哪一个是展开的呢? 展开
效果跟这样的就可以http://www.zzsky.cn/effect/content/1550.htm
但是需要可以默认展开一个，而默认展开的这个可以指定。
谢谢！在线等！
兄弟，是有问题的啊，默认打开的是第2个，这时你点第1或第3个第2个不会收回去
我如何通过传递参数来确定哪一个是展开的呢? 展开
展开全部
var lastFaqClick=null;
var expandIndex = 1; //设置展开一个
window.onload=function(){
var faq=document.getElementById("faq");
var dls=faq.getElementsByTagName("dl");
for (var i=0,dl;dl=dls[i];i++){
var dt=dl.getElementsByTagName("dt")[0];//取得标题
dt.id = "faq_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;
}
if(i == expandIndex){
dt.onclick();
}
}
}
//你是页面之间传递参数 还是你用脚本点击按钮等传递参数?
//页面传递的话你直接修改expandIndex值 如果用js修改expandIndex值你再重新调用这函数 也就是重新绑定点击事件 方法很多你随便想想就会有的
var expandIndex = 1; //设置展开一个
window.onload=function(){
var faq=document.getElementById("faq");
var dls=faq.getElementsByTagName("dl");
for (var i=0,dl;dl=dls[i];i++){
var dt=dl.getElementsByTagName("dt")[0];//取得标题
dt.id = "faq_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;
}
if(i == expandIndex){
dt.onclick();
}
}
}
//你是页面之间传递参数 还是你用脚本点击按钮等传递参数?
//页面传递的话你直接修改expandIndex值 如果用js修改expandIndex值你再重新调用这函数 也就是重新绑定点击事件 方法很多你随便想想就会有的
本回答由提问者推荐
已赞过
已踩过<
你对这个回答的评价是？
展开全部
<!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>
<title>中国站长天空-网页特效-导航菜单-很实用的展开/收缩菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
body {
margin: 30px auto;
}
ul {
list-style: none;
}
#faq {
font-size: 12px;
width: 800px;
}
#faq li {
margin: 0 0 10px;
padding: 0 0 5px;
}
#faq dl {
margin: 0;
padding:0;
display:inline;
}
#faq dt {
font-weight:bold;
cursor:pointer;
line-height: 20px;
padding: 0 0 5px 22px;
border-bottom:1px #ccc dotted;
}
#faq dd {
display:none;
margin:0;
padding: 5px 0 5px 20px;
background:#E5ECF9;
line-height: 180%;
}
</style>
<script type="text/javascript">
var lastFaqClick=null;
window.onload=function(){
var faq=document.getElementById("faq");
var dls=faq.getElementsByTagName("dl");
for (var i=0,dl;dl=dls[i];i++){
var dt=dl.getElementsByTagName("dt")[0];//取得标题
dt.id = "faq_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;
}
}
}
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>
<!--把下面代码加到<body>与</body>之间-->
<ul id="faq">
<li>
<dl>
<dt>AjAX是什么？</dt>
<dd>一种能够提升用户体验的WEB2.0新型技术，可以实现像电脑系统一样的操作体验，类似本地化的一种脚本技术。</dd>
</dl>
</li>
<li>
<dl>
<dt>AjAX是什么？</dt>
<dd style="display:block">一种能够提升用户体验的WEB2.0新型技术，可以实现像电脑系统一样的操作体验，类似本地化的一种脚本技术。</dd>
</dl>
</li>
<li>
<dl>
<dt>AjAX是什么？</dt>
<dd>一种能够提升用户体验的WEB2.0新型技术，可以实现像电脑系统一样的操作体验，类似本地化的一种脚本技术。</dd>
</dl>
</li>
</ul>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>中国站长天空-网页特效-导航菜单-很实用的展开/收缩菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
body {
margin: 30px auto;
}
ul {
list-style: none;
}
#faq {
font-size: 12px;
width: 800px;
}
#faq li {
margin: 0 0 10px;
padding: 0 0 5px;
}
#faq dl {
margin: 0;
padding:0;
display:inline;
}
#faq dt {
font-weight:bold;
cursor:pointer;
line-height: 20px;
padding: 0 0 5px 22px;
border-bottom:1px #ccc dotted;
}
#faq dd {
display:none;
margin:0;
padding: 5px 0 5px 20px;
background:#E5ECF9;
line-height: 180%;
}
</style>
<script type="text/javascript">
var lastFaqClick=null;
window.onload=function(){
var faq=document.getElementById("faq");
var dls=faq.getElementsByTagName("dl");
for (var i=0,dl;dl=dls[i];i++){
var dt=dl.getElementsByTagName("dt")[0];//取得标题
dt.id = "faq_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;
}
}
}
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>
<!--把下面代码加到<body>与</body>之间-->
<ul id="faq">
<li>
<dl>
<dt>AjAX是什么？</dt>
<dd>一种能够提升用户体验的WEB2.0新型技术，可以实现像电脑系统一样的操作体验，类似本地化的一种脚本技术。</dd>
</dl>
</li>
<li>
<dl>
<dt>AjAX是什么？</dt>
<dd style="display:block">一种能够提升用户体验的WEB2.0新型技术，可以实现像电脑系统一样的操作体验，类似本地化的一种脚本技术。</dd>
</dl>
</li>
<li>
<dl>
<dt>AjAX是什么？</dt>
<dd>一种能够提升用户体验的WEB2.0新型技术，可以实现像电脑系统一样的操作体验，类似本地化的一种脚本技术。</dd>
</dl>
</li>
</ul>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
