如何动态显示三级列表

YaphetS_Jo 2017-02-06 04:36:15

数据是通过网络请求获取的，如何能达到如图效果（图片为二级列表，需要显示三级列表

）

...全文

532 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

jio可 2017-02-08

打赏
举报

引用 7 楼 YaphetS_Jo 的回复:

[quote=引用 6 楼 u012418098 的回复:] 数据格式是一次返回所有还是点击获取下一级。

数据是从手机端拿的，应该是控件的问题，我是做安卓的，老板让看一下html做一个这个效果，才看了三天左右还不是特别了解，点击以后子列表display：block了但是不显示，是不是ul或者li的高度什么的没设置对？[/quote] 看一下点击的dom里面是否存在子节点的dom，如果存在就是样式的问题

YaphetS_Jo 2017-02-08

打赏
举报

引用 6 楼 u012418098 的回复:

数据格式是一次返回所有还是点击获取下一级。

数据是从手机端拿的，应该是控件的问题，我是做安卓的，老板让看一下html做一个这个效果，才看了三天左右还不是特别了解，点击以后子列表display：block了但是不显示，是不是ul或者li的高度什么的没设置对？

YaphetS_Jo 2017-02-08

打赏
举报

引用 8 楼 u012418098 的回复:

[quote=引用 7 楼 YaphetS_Jo 的回复:] [quote=引用 6 楼 u012418098 的回复:] 数据格式是一次返回所有还是点击获取下一级。

数据是从手机端拿的，应该是控件的问题，我是做安卓的，老板让看一下html做一个这个效果，才看了三天左右还不是特别了解，点击以后子列表display：block了但是不显示，是不是ul或者li的高度什么的没设置对？[/quote] 看一下点击的dom里面是否存在子节点的dom，如果存在就是样式的问题[/quote] //向li中添加内容 li.innerHTML = arrays[i]+ "<img src=\"img/normal2.png\" width=\"35\" style=\"float: right; margin-top: 0px; margin-right: 20px;\" />"; 把这行改成 li.innerHTML = arrays[i];点击是没问题的，还请大神麻烦看看是不是要设置高宽什么的

jio可 2017-02-07

打赏
举报

数据格式是一次返回所有还是点击获取下一级。

YaphetS_Jo 2017-02-07

打赏
举报

引用 4 楼 u012418098 的回复:

事件是怎么绑定的，把代码贴出来吧

function addData() {
				var n = 3;
				var i = 0
				for(i = 0; i < n; i++) { //获取到Ul列表
					var ul = document.getElementById("u");
					//创建元素Li
					var li = document.createElement("li");

					var ulChild = document.createElement("ul");

					ulChild.style.width = "100%";

					//向li中添加内容
					li.innerHTML = arrays[i]+ "<img src=\"img/normal2.png\" width=\"35\" style=\"float: right; margin-top: 0px; margin-right: 20px;\" />";

					li.style.color = "#0000FF";
					li.style.background = "666";

					li.addEventListener("click", function() {
						if(child == 0) {
							child = 1;
						}
						if(this.childElementCount == 0) {
							//							alert("add");
							var k = 0;
							var len = ulChild.childNodes.length;

							for(k = 0; k < len; k++) {
								//								alert(k);
								ulChild.removeChild(ulChild.childNodes[0]);
							}

							var j = 0;
							for(j = 0; j < n; j++) {
								var ul2 = document.createElement("ul");
								var lichild = document.createElement("li");
								lichild.style.height = "100%";
								lichild.style.width = "100%";
								lichild.innerHTML = childarrays[j];
//								ulChild.style.height="100px";
								ulChild.appendChild(lichild);
								lichild.style.color = "darkgoldenrod";
								lichild.addEventListener("click", function() {

									if(child == 0) {
										child = 2;
									}
									if(this.childElementCount == 0) {
										//							alert("add");
										var k = 0;
										var len = ul2.childNodes.length;
										for(k = 0; k < len; k++) {
											//								alert(k);
											ulChild.removeChild(ulChild.childNodes[0]);
										}

										var j = 0;
										for(j = 0; j < n; j++) {
											var lichild2 = document.createElement("li");
											lichild2.innerHTML = childarrays[j];
											ul2.appendChild(lichild2);
											lichild2.addEventListener("click", function() {
												child = 3;
												//												loadXMLDoc('http://i2.mediapower.mobi/adpower/vm/Bora/js/test.js');
											});
										}
										ul2.style.display = 'block';
										this.appendChild(ul2);
									} else if(ul2.style.display != 'none') {
										if(child == 2) {
											ul2.style.display = 'none';
										}
									} else {
										ul2.style.display = 'block';
									}
								});
							}
							ulChild.style.display = 'block';
							this.appendChild(ulChild);
						} else if(ulChild.style.display != 'none') {
							if(child == 1) {
								ulChild.style.display = 'none';
//								alert("none");
							}
						} else {
//														alert("block");
							ulChild.style.display = 'block';
						}
						child = 0;
					});

					//向ul追加元素li
					ul.appendChild(li);

				}
			}

jio可 2017-02-06