发新贴  快速回复

DOM详解(2016年新版)-练习-树型菜单-求帮助

  safari
2018-01-15 21:04

参考了其它同学的,大致效果做出来了,但有很多地方不明白

1.这个练习的思路就是点击当前的节点使其显示,其它关闭,通过dom找到当前和所有其它节点相比较,如果不是当前节点就关闭(这个思路对吗?)。  

   我开始用for套for,让所有节点关闭当前显示,做不出来,后来用onOff开关也做不出来,想问这两个思路是否行的通?

2.js代码里用style.display='block'或'none'表示展开或隐藏,但如果换成用css里的 .show{display:block} .hide{display:none},className='show'或className='hide' ,就没有效果了。

3.第一层节点多次点击后,有的h3要点两次才能展开ul,

  另一个代码中,h3前面的 +/- 号不对,关闭时应是+,展开时应是-,但有时是反的

附件下载:
 
2017年2月8日

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

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

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

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

2018-01-16 08:48  回复本帖
 
safari

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>

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

 

附件下载:
 
2018-01-16 14:28  回复本帖
 
safari

2017年2月8日 2018-01-16 08:48发表的内容:

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

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

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

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

还是请老师教我!
2018-01-16 20:46  回复本帖
 
safari

safari 2018-01-16 20:46发表的内容:

还是请老师教我!
请老师发代码吧,谢谢
2018-01-17 20:45  回复本帖
2017年2月8日

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

2018-01-18 09:30  回复本帖
2017年2月8日

safari 2018-01-17 20:45发表的内容:

请老师发代码吧,谢谢
好的,不过做之前我要问一下,就是第一层的子层的子层的子层是显示的,然后点击第二层的时候,第二层的子层显示,那请问第一层的子层的子层的子层是不是都要隐藏起来。然后点击第一层的时候又从头来。
2018-01-18 09:30  回复本帖
 
safari

2017年2月8日 2018-01-18 09:30发表的内容:

好的,不过做之前我要问一下,就是第一层的子层的子层的子层是显示的,然后点击第二层的时候,第二层的子层显示,那请问第一层的子层的子层的子层是不是都要隐藏起来。然后点击第一层的时候又从头来。
就像这张图片的效果一样:
http://img.microbu.com/2017/1113/70005807224680_1200x1200.gif
2018-01-18 20:24  回复本帖
2017年2月8日

safari 2018-01-18 20:24发表的内容:

就像这张图片的效果一样:
http://img.microbu.com/2017/1113/70005807224680_1200x1200.gif
你这张图片的效果我觉得有点问题,就是那些加号和减号有问题,我感觉不对,但是我从这张图片大约能猜到你要什么效果,html结构代码有点多,我直接发附件了,你看附件的效果,看看是不是你想要的。
2018-01-20 19:04  回复本帖
2017年2月8日

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

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

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

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

 

附件下载:
 
2018-01-20 19:13  回复本帖
 
safari

2017年2月8日 2018-01-20 19:13发表的内容:

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

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

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

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

 

谢谢老师!
请问这句话:
ele=ele.parentNode.parentNode;
是传递的作用吗,一层一层的向上找<ul> ?
2018-01-21 21:19  回复本帖
2017年2月8日

safari 2018-01-21 21:19发表的内容:

谢谢老师!
请问这句话:
ele=ele.parentNode.parentNode;
是传递的作用吗,一层一层的向上找<ul> ?
对,主要是找到嵌套多层的父级,一直往上找。
2018-01-22 12:32  回复本帖
 
safari

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

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

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

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

   aB.innerHTML='+';

   aPP.appendChild(aB) 

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

附件下载:
 
2018-02-26 15:31  回复本帖
 
safari

2017年2月8日 2018-01-22 12:32发表的内容:

对,主要是找到嵌套多层的父级,一直往上找。
老师能不能帮忙看一下新的问题,我是在原来帖子上发的,不知道您的后台有没有更新,谢谢!
2018-02-27 15:50  回复本帖
2017年2月8日

safari 2018-02-26 15:31发表的内容:

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

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

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

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

   aB.innerHTML='+';

   aPP.appendChild(aB) 

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

就是你想让html结构由js生成是不是,然后数据写成一个json。如果是这样,我可以写一个例子让你参考。
2018-02-27 15:58  回复本帖
2017年2月8日

safari 2018-02-27 15:50发表的内容:

老师能不能帮忙看一下新的问题,我是在原来帖子上发的,不知道您的后台有没有更新,谢谢!
你的代码我看了,你说这句话错了aPP.appendChild(aB)。这句话当中aPP是一个元素的集合,不是单独一个元素节点。
2018-02-27 16:01  回复本帖
 
safari

2017年2月8日 2018-02-27 15:58发表的内容:

就是你想让html结构由js生成是不是,然后数据写成一个json。如果是这样,我可以写一个例子让你参考。
是的,就是由json生成的树型菜单,说是用递归的方法。
2018-02-27 16:04  回复本帖
 
safari

2017年2月8日 2018-02-27 16:01发表的内容:

你的代码我看了,你说这句话错了aPP.appendChild(aB)。这句话当中aPP是一个元素的集合,不是单独一个元素节点。
那要怎么改的?
2018-02-27 16:06  回复本帖
2017年2月8日

safari 2018-02-27 16:04发表的内容:

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

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

2018-02-27 16:07  回复本帖
2017年2月8日

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

附件下载:
 
2018-02-27 16:51  回复本帖
 
safari

2017年2月8日 2018-02-27 16:51发表的内容:

拿上次发的那个改的,他们的区别就是,一个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; 为什么是+=
2018-02-27 18:54  回复本帖
2017年2月8日

safari 2018-02-27 18:54发表的内容:

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标签就不见了。
2018-02-27 21:39  回复本帖
 
safari

2017年2月8日 2018-02-27 16:51发表的内容:

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

用json写title,child 写写就会乱,有什么方法可以不乱的吗? 我用的是DW
2018-02-28 11:04  回复本帖
2017年2月8日

safari 2018-02-28 11:04发表的内容:

用json写title,child 写写就会乱,有什么方法可以不乱的吗? 我用的是DW
有台传过来的数据一般都是数组、json形式的字符串,如果不用json,那会更乱,怎么表示那些title。所以,要么数据直接写进html,要么我感觉只能用json这种格式。数据直接写进html了,拿给后台,后台也是有办法通过循环写出来的。不是说要一个一个手写。json这种数据也是后台传过来,也不是要你一个一个手写的。做练习,只是模拟,所以只能手动写了。
2018-02-28 11:47  回复本帖
 
safari

2017年2月8日 2018-02-27 16:51发表的内容:

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

ul.className='yes-ul'+count;
createHtml(data[i].child,ul,count+1);
怎么能知道count数值是几,如果最多有5层,那count就是4,这个值怎么算出来的呢? data[i] 是只有3个吗?
2018-02-28 14:49  回复本帖
2017年2月8日

safari 2018-02-28 14:49发表的内容:

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。递归,以此类推。
2018-02-28 15:11  回复本帖
 
safari

2017年2月8日 2018-02-27 16:51发表的内容:

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

根据代码反推思路:
由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)

这么理解可以么?
2018-02-28 16:08  回复本帖
2017年2月8日

safari 2018-02-28 16:08发表的内容:

根据代码反推思路:
由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)

这么理解可以么?
差不多就是这个意思
2018-02-28 19:41  回复本帖
 
safari

2017年2月8日 2018-02-27 16:51发表的内容:

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

老师把下面这两句去掉了,好像对效果没有影响?
aP[i].onOff=true;
aP[this.index].onOff=false;
2018-02-28 21:34  回复本帖
2017年2月8日

safari 2018-02-28 21:34发表的内容:

老师把下面这两句去掉了,好像对效果没有影响?
aP[i].onOff=true;
aP[this.index].onOff=false;
对那两句话是没有用的,那时候我为了尝试其它做法,给它们都加自定义开关,后来,没有做了,忘记删除了,你把它们删除就行了 。
2018-02-28 22:10  回复本帖
 
safari

2017年2月8日 2018-02-28 22:10发表的内容:

对那两句话是没有用的,那时候我为了尝试其它做法,给它们都加自定义开关,后来,没有做了,忘记删除了,你把它们删除就行了 。
谢谢老师的帮助!
2018-02-28 22:16  回复本帖
维生素

2017年2月8日 2018-01-22 12:32发表的内容:

对,主要是找到嵌套多层的父级,一直往上找。
我删除本段代码后,点击二级菜单却将一级菜单关闭了,想请问是冒泡引起的么,然后用下面的代码进行修复?
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;

}
2018-10-24 15:03  回复本帖
2017年2月8日

维生素 2018-10-24 15:03发表的内容:

我删除本段代码后,点击二级菜单却将一级菜单关闭了,想请问是冒泡引起的么,然后用下面的代码进行修复?
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都隐藏了。
2018-10-24 15:20  回复本帖
维生素

2017年2月8日 2018-10-24 15:20发表的内容:

不是冒泡,是这段代码引起的
for(var i=0;i<iLen;i++){
aI[i].innerHTML='+';
aUl[i].style.display='none';
}
这段代码将所有的ul都隐藏了。
茅塞顿开 感谢
2018-10-24 15:59  回复本帖
维生素

2017年2月8日 2018-10-24 15:20发表的内容:

不是冒泡,是这段代码引起的
for(var i=0;i<iLen;i++){
aI[i].innerHTML='+';
aUl[i].style.display='none';
}
这段代码将所有的ul都隐藏了。
茅塞顿开 感谢
2018-10-24 15:59  回复本帖
登录 后才可以发表回复