1、代码
image.png
erjiliandong.css
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
display: flex;
display: -webkit-flex;
justify-content: center;
align-items: center;
border-radius: 5%;
}
#ld{
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
}
#ld-left > .ld-key{
width: 190px;
height: 40px;
border-bottom: 1px solid aliceblue;
background: blueviolet;
}
#ld-left >.ld-right > .ld-value{
width: 190px;
height: 40px;
border-bottom: 1px solid aliceblue;
background: green;
}
#ld-left{
width:100px;
height:150px;
}
erjiliandong.js
function liandong(arg){
this.create(arg); //入口
}
liandong.prototype={
create:function(arg){
this.sit=arg; //保存数据
this.key=[]; //做key值储存池，留做渲染
this.clickFlag = [];
var _self=this;
getKey(arg,_self); //获取key值
this.showKey(this.key); //渲染key值
this.keyEvent(); //点击事件
},
showKey:function(key){ //渲染key
var left=document.getElementById('ld-left');
for(var index=0;index<key.length;index++){
var msg=key[index];
var li=document.createElement('li');
li.id = 'ld-key'+index;
li.setAttribute("class",'ld-key');
li.innerText=msg;
left.appendChild(li);
var ul=document.createElement('ul');
ul.id="ld-right"+index;
ul.setAttribute("class",'ld-right');
left.appendChild(ul);
}
},
keyEvent:function(){ //li的点击事件
var _self=this; //保存对象
var key=document.getElementById('ld-left');
var list=key.childNodes;
for( i in list){
var i=i;
if(list[i].nodeName=='LI'){
list[i].onclick=function(){
var k=this.innerText;
var xid = (this.id).replace("ld-key","");
_self.showValue(k,xid);
}
}
}
},
showValue:function(key,xid){ //显示value值
var right=document.getElementById('ld-right'+xid);
this.clearValue(right);
debugger;
if(this.clickFlag[xid]==null ||this.clickFlag[xid]==true){
var value=this.sit[key];
for(var index=0;index<value.length;index++){
var msg=value[index];
var li=document.createElement('li');
li.setAttribute("class",'ld-value');
li.innerText=msg;
right.appendChild(li);
}
this.clickFlag[xid] = false;
}else{
this.clickFlag[xid] = true;
}
},
clearValue:function(right){ // 清除value值
right.innerHTML=null;
},
destory:function(){
this.sit=[]; //保存数据
this.key=[]; //做key值储存池，留做渲染
this.clickFlag = [];
var left=document.getElementById('ld-left');
left.innerHTML=null;
}
}
function getKey(site,obj){ //获取key，并将key值传入数组渲染
for(var key in site){
var key=key;
obj.key.push(key);
}
}
newFile.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" session="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!--
- Author(s): Administrator
- Date: 2018-09-02 23:51:28
- Description:
-->
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="<%= request.getContextPath() %>/common/nui/nui.js" type="text/javascript"></script>
<script src="<%= request.getContextPath() %>/eos/js/erjiliandong.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/erjiliandong.css" />
</head>
<a class="nui-button" onclick="clear" iconCls="icon-edit">
销毁
</a>
<body>
<ul id="ld">
<ul id="ld-left">
</ul>
<ul id="ld-right">
</ul>
</ul>
<script type="text/javascript">
nui.parse();
var l;
var city={
"name":["网站"],
"num":['niace','aaaa'],
"sites":[ "Google", "Runoob", "Taobao" ] //设置数据
}
window.onload=function(){
l=new liandong(city); //实例化联动
}
function clear(){
l.destory();
}
</script>
</body>
</html>
2、效果
image.png
image.png
