select.js选择框打开时重叠

Question

我遇到了使用脚本的自定义选择框的问题。它正在工作，但是，例如，如果您从底部选择框开始并单击它，然后单击中间，然后按顶部它的工作原理，通过关闭上一个框。

但是，如果您单击顶部框之后的中间框，顶部框也会打开，并且所有框都会发生这种情况。

是否有任何解决这个？

这是我jsFiddle

function tamingselect() 
{ 
if(!document.getElementById && !document.createTextNode){return;} 


var ts_selectclass='turnintodropdown'; // class to identify selects 
var ts_listclass='turnintoselect';  // class to identify ULs 
var ts_boxclass='dropcontainer';  // parent element 
var ts_triggeron='activetrigger';  // class for the active trigger link 
var ts_triggeroff='trigger';   // class for the inactive trigger  link 
var ts_dropdownclosed='dropdownhidden'; // closed dropdown 
var ts_dropdownopen='dropdownvisible'; // open dropdown 

var count=0; 
var toreplace=new Array(); 
var sels=document.getElementsByTagName('select'); 
for(var i=0;i<sels.length;i++){ 
    if (ts_check(sels[i],ts_selectclass)) 
    { 
     var hiddenfield=document.createElement('input'); 
     hiddenfield.name=sels[i].name; 
     hiddenfield.type='hidden'; 
     hiddenfield.id=sels[i].id; 
     hiddenfield.value=sels[i].options[0].value; 
     sels[i].parentNode.insertBefore(hiddenfield,sels[i]) 
     var trigger=document.createElement('a'); 
     ts_addclass(trigger,ts_triggeroff); 
     trigger.href='#'; 
     trigger.onclick=function(){ 
      ts_swapclass(this,ts_triggeroff,ts_triggeron) 
      ts_swapclass(this.parentNode.getElementsByTagName('ul')[0],ts_dropdownclosed,ts_dropdownopen); 
      return false; 
     } 
     trigger.appendChild(document.createTextNode(sels[i].options[0].text)); 
     sels[i].parentNode.insertBefore(trigger,sels[i]); 
     var replaceUL=document.createElement('ul'); 
     for(var j=0;j<sels[i].getElementsByTagName('option').length;j++) 
     { 
      var newli=document.createElement('li'); 
      var newa=document.createElement('a'); 
      newli.v=sels[i].getElementsByTagName('option')[j].value; 
      newli.elm=hiddenfield; 
      newli.istrigger=trigger; 
      newa.href='#'; 
      newa.appendChild(document.createTextNode(
      sels[i].getElementsByTagName('option')[j].text)); 
      newli.onclick=function(){ 
       this.elm.value=this.v; 
       ts_swapclass(this.istrigger,ts_triggeron,ts_triggeroff); 
       ts_swapclass(this.parentNode,ts_dropdownopen,ts_dropdownclosed) 
       this.istrigger.firstChild.nodeValue=this.firstChild.firstChild.nodeValue; 
       return false; 
      } 
      newli.appendChild(newa); 
      replaceUL.appendChild(newli); 
     } 
     ts_addclass(replaceUL,ts_dropdownclosed); 
     var div=document.createElement('div'); 
     div.appendChild(replaceUL); 
     ts_addclass(div,ts_boxclass); 
     sels[i].parentNode.insertBefore(div,sels[i]) 
     toreplace[count]=sels[i]; 
     count++; 
    } 
} 


var uls=document.getElementsByTagName('ul'); 
for(var i=0;i<uls.length;i++) 
{ 
    if(ts_check(uls[i],ts_listclass)) 
    { 
     var newform=document.createElement('form'); 
     var newselect=document.createElement('select'); 
     for(j=0;j<uls[i].getElementsByTagName('a').length;j++) 
     { 
      var newopt=document.createElement('option'); 
      newopt.value=uls[i].getElementsByTagName('a')[j].href; 
      newopt.appendChild(document.createTextNode(uls[i].getElementsByTagName('a')[j].innerHTML)); 
      newselect.appendChild(newopt); 
     } 
     newselect.onchange=function() 
     { 
      window.location=this.options[this.selectedIndex].value; 
     } 
     newform.appendChild(newselect); 
     uls[i].parentNode.insertBefore(newform,uls[i]); 
     toreplace[count]=uls[i]; 
     count++; 
    } 
} 
for(i=0;i<count;i++){ 
    toreplace[i].parentNode.removeChild(toreplace[i]); 
} 
function ts_check(o,c) 
{ 
    return new RegExp('\\b'+c+'\\b').test(o.className); 
} 
function ts_swapclass(o,c1,c2) 
{ 
    var cn=o.className 
    if (o.nodeName.toUpperCase()=='A'&&ts_check(o,c1)){ 
    if (ts_swapclass.lst&&ts_swapclass.lst!=o){ 
     ts_swapclass(ts_swapclass.lst,ts_triggeroff,ts_triggeron); 
     ts_swapclass(ts_swapclass.lst.parentNode.getElementsByTagName('ul') [0],ts_dropdownclosed,ts_dropdownopen); 
    } 
    ts_swapclass.lst=o; 
    } 
    o.className=!ts_check(o,c1)?cn.replace(c2,c1):cn.replace(c1,c2); 
} 
function ts_addclass(o,c) 
{ 
    if(!ts_check(o,c)){o.className+=o.className==''?c:' '+c;} 
} 
} 

window.onload=function() 
{ 
tamingselect(); 
} 

Answer 1

我无法修复的代码，所以我找到了一个快速的解决办法是完美的作品。

感谢大家的努力。

*修正

$(".d2").click(function() { 
    $('.d3 .dropcontainer').css("display", "none"); 
}); 

$(".d1").click(function() { 
    $('.d2 .dropcontainer').css("display", "none"); 
}); 

$(".d1").click(function() { 
    $('.d3 .dropcontainer').css("display", "none"); 
}); 


$(".d3").click(function() { 
    $('.d1 .dropcontainer').css("display", "none"); 
}); 

$(".d3").click(function() { 
    $('.d2 .dropcontainer').css("display", "none"); 
}); 


$('.d3').click(function() { 
    $('.d3 .dropcontainer').css("display", "block"); 
}); 

$('.d2').click(function() { 
    $('.d2 .dropcontainer').css("display", "block"); 
}); 

$('.d1').click(function() { 
    $('.d1 .dropcontainer').css("display", "block"); 
}); 

Answer 2

$(document).mouseup(function (e){ 
     div_cld = $('.dropcontainer'); 
     div_par = $('.activetrigger'); 
     if (!div_cld.is(e.target) && !div_par.is(e.target) && div_cld.has(e.target).length === 0) { 
      div_cld.find('ul').removeClass('dropdownvisible'); 
      div_cld.find('ul').addClass('dropdownhidden'); 
     } 
    });