1、先给要点击的按钮加索引，然后点击当前的按钮就让对应的ul显示，其它隐藏，但是刚做这样的效果，可能初学者不知道哪些要隐藏，于是就让所有的都隐藏（包括自身），然后再让自身显示。如果熟练了，完全不需要这样，可以用个变量存显示的那个。

2、如果用行间样式写可以隐藏，用class写就不可以，首先检查是不是有字母拼错了，如果没有，那就是样式的优先级不高，可以打开控制台，看看点击的时候class有没有加到元素身上。

3、索引对应的时候要一一对应，隐藏的时候要所有都隐藏一遍，自己显示，这样的思路肯定不会错。

如果上述不明白，我可以写一遍代码给你看，写程序主要的是要积累技巧，js手段，效果实现思路。只要坚持，不出一年，绝对可以和妙味的老师一拼。想要半年就成功的，我觉得每天要学习14小时以上。

1.用所有隐藏当前展开的思路重新写一个代码，还有问题，只能点击到第一层展开，再点击第二层就不能展开了，这个请老师帮我看看。

2.如果这样写，控制台里 class=show 就被划去了，展开不了，优先级低于 #lis ul{display:none; }，

<style>

#lis ul{display:none; }

.show{display:block;}

.hide{ display:none;}

h3.active{ background:yellow;}

</style>

如果换一下位置

<style>

#lis ul.show{display:block;}

#lis ul.hide{ display:none;}

h3.active{ background:yellow;}

#lis ul{display:none; }

</style>

这样就不会被划去了，可以展开了。这个又是为什么？

 

还是请老师教我！

请老师发代码吧，谢谢

好的，不过做之前我要问一下，就是第一层的子层的子层的子层是显示的，然后点击第二层的时候，第二层的子层显示，那请问第一层的子层的子层的子层是不是都要隐藏起来。然后点击第一层的时候又从头来。

好的，不过做之前我要问一下，就是第一层的子层的子层的子层是显示的，然后点击第二层的时候，第二层的子层显示，那请问第一层的子层的子层的子层是不是都要隐藏起来。然后点击第一层的时候又从头来。

就像这张图片的效果一样：
http://img.microbu.com/2017/1113/70005807224680_1200x1200.gif

你这张图片的效果我觉得有点问题，就是那些加号和减号有问题，我感觉不对，但是我从这张图片大约能猜到你要什么效果，html结构代码有点多，我直接发附件了，你看附件的效果，看看是不是你想要的。

说说我的思路，具体你还是看附件里的代码，文字很难说明这些的。

首先获取到那些点击后出现下级菜单的元素和下级菜单元素，给他们加索引，这样就能一一对应了。

无论什么情况，先把所有的隐藏，点的那个显示，这种做法是最容易，最不容易出错的。不想所有的隐藏，那需要建立很多映射关系，因为太多层了，这里暂不考虑，目前先考虑把效果做出来。

以上就是大体的思路，具体看代码。代码哪里看不懂再来问，里面js我已经尽可能写到最少了。

 

谢谢老师！
请问这句话：
ele=ele.parentNode.parentNode;
是传递的作用吗，一层一层的向上找<ul> ？

对，主要是找到嵌套多层的父级，一直往上找。

老师您好，树型菜单扩展的练习，有些问题:

1.我把json变成dom树写出来，又加上您上次教的代码，做出来一个可以点击展开或隐藏的菜单，但加号+放在哪里加比较好？我想在P标签后面加appendChild，但提示出错，请看附件。

2.如果不用加号+，即去掉含有加号的相关代码，也就是这三句话:

   var aB=document.createElement('b');

   aB.innerHTML='+';

   aPP.appendChild(aB) 

   还是有问题，点击当前层不能隐藏

老师能不能帮忙看一下新的问题，我是在原来帖子上发的，不知道您的后台有没有更新，谢谢！

就是你想让html结构由js生成是不是，然后数据写成一个json。如果是这样，我可以写一个例子让你参考。

你的代码我看了，你说这句话错了aPP.appendChild(aB)。这句话当中aPP是一个元素的集合，不是单独一个元素节点。

是的，就是由json生成的树型菜单，说是用递归的方法。

那要怎么改的？

我等下写个demo让你看下，然后发到附件里。上次那个数据直接写在html你能看懂，然后把数据换成js生成，就可以了，这里打字难以表达，等下你直接看附件里的代码，我现在去写。

拿上次发的那个改的，他们的区别就是，一个html结构手动写，一个html结构js生成，其它完全一样，连点击展开收缩的功能写法都一样。具体参考附件代码，不懂来问。

createHtml(data[i].child,ul,count+1);
li.appendChild(ul);
}
p.innerHTML+=data[i].title;
elem.appendChild(li);
}
}
createHtml(dataArr,oBox,2);
这几句不是很明白，
1. 为什么递归调用时用 data[i].child ，里面怎么是ul
2.p.innerHTML+=data[i].title; 为什么是+=

第一个问题：首先最大的那个数据格式是这样的
var dataArr=[{'title':'第一级菜单','child':[{'title':'第二级菜单'}]},{}]；
它里面的下级'child':[{'title':'第二级菜单'}]跟dataArr的格式其实一样的，所以才可以递归，刚好把这个给传进去，为什么是ul，因为只要有child属性就表示有下级，那下级不就是一个ul列表嘛，所以要创建的就是ul。
第二个问题：p.innerHTML里面不仅有标题，还有那个+号，就是<i>+</i>，所以采用+=，如果用=，i标签就不见了。

用json写title,child 写写就会乱，有什么方法可以不乱的吗？ 我用的是DW

有台传过来的数据一般都是数组、json形式的字符串，如果不用json，那会更乱，怎么表示那些title。所以，要么数据直接写进html，要么我感觉只能用json这种格式。数据直接写进html了，拿给后台，后台也是有办法通过循环写出来的。不是说要一个一个手写。json这种数据也是后台传过来，也不是要你一个一个手写的。做练习，只是模拟，所以只能手动写了。

ul.className='yes-ul'+count;
createHtml(data[i].child,ul,count+1);
怎么能知道count数值是几，如果最多有5层，那count就是4，这个值怎么算出来的呢？ data[i] 是只有3个吗？

count的值第一次是手动加进去的，传个2，因为1是最大的那个ul，那个ul在页面上写着呢。之后，如果有下级，说明就有ul，那么ul肯定是比上一层加1，所以在传参数的时候就可以先把count+1在传进去。例如刚开始调用createHtml('','',2),之后在函数里面再调用createHtml('','',2+1)，那么此刻就变成3了，其中2就是那个参数count。递归，以此类推。

根据代码反推思路：
由json生成html结构
先创建几个元素 li p i ul
i标签里有+号
p标签插入li里

如果数组元素里有child,那么
<p className="yes-p">
<p className="yes-p"><i>+</i></p>
<ul className="yes-ul"+count></ul>
调用createHtml(有child的数组元素，有child而生成的ul，count+1)
把ul插入li里

p标签里插入title和+号
把li插入oBox里

调用createHtml(数组，oBox,count初始值2)

这么理解可以么？

差不多就是这个意思

老师把下面这两句去掉了，好像对效果没有影响？
aP[i].onOff=true;
aP[this.index].onOff=false;

对那两句话是没有用的，那时候我为了尝试其它做法，给它们都加自定义开关，后来，没有做了，忘记删除了，你把它们删除就行了 。

谢谢老师的帮助！

我删除本段代码后，点击二级菜单却将一级菜单关闭了，想请问是冒泡引起的么，然后用下面的代码进行修复？
var ele=this.parentNode.parentNode;
while(ele){
if(ele.previousElementSibling){ele.previousElementSibling.children[0].innerHTML='-';}
ele.style.display='block';
ele=ele.parentNode.parentNode;
if(ele.tagName!='UL')break;

}

不是冒泡，是这段代码引起的
for(var i=0;i<iLen;i++){
aI[i].innerHTML='+';
aUl[i].style.display='none';
}
这段代码将所有的ul都隐藏了。

茅塞顿开 感谢

茅塞顿开 感谢