实在是找不到很好的解决方法了,于是利用列表和js来模拟select了。
代码如下,如果有更好的方法请告诉我一声,谢谢。
Document
body {
display: flex;
flex-direction: column;
}
li {
list-style: none;
cursor: pointer;
border: 1px solid red;
display: none;
}
li:first-child {
display: block;
}
请选择234 请选择234
let select = document.getElementById('select');
select.addEventListener('click',(e)=>{
if(e.target.tagName == 'LI'){
let parentNode = e.target.parentNode;
let broderNodes = e.target.parentNode.childNodes;
let childrenNodes = e.target.parentNode.parentNode.childNodes;
let list = [];
for(let i in childrenNodes){
if([].indexOf.call(childrenNodes,childrenNodes[i])%2 == 1){
list.push(childrenNodes[i])
}
}
if([].indexOf.call(broderNodes,e.target) == 1){
if(broderNodes[3].style.display == 'block'){
for (let i in list){
if(e.target.parentNode != list[i]){
list[i].style.display = 'block';
}else{
let nodes = list[i].childNodes;
for(let j in nodes){
if([].indexOf.call(nodes,nodes[j]) == 1){
nodes[j].innerHTML = e.target.innerHTML;
}else if([].indexOf.call(nodes,nodes[j])%2 == 1){
nodes[j].style.display = 'none';
}
}
}
}
}else{
for (let i in list){
if(e.target.parentNode != list[i]){
list[i].style.display = 'none';
}else{
let nodes = list[i].childNodes;
for(let j in nodes){
if([].indexOf.call(nodes,nodes[j])%2 == 1){
nodes[j].style.display = 'block';
}
}
}
}
}
}else{
for (let i in list){
if(e.target.parentNode != list[i]){
list[i].style.display = 'block';
}else{
let nodes = list[i].childNodes;
for(let j in nodes){
if([].indexOf.call(nodes,nodes[j]) == 1){
nodes[j].innerHTML = e.target.innerHTML;
}else if([].indexOf.call(nodes,nodes[j])%2 == 1){
nodes[j].style.display = 'none';
}
}
}
}
}
}
})