CSS
*{padding:0;margin:0;}
.pull-down-menus_box{position:absolute;border:1px solid #e3e3e5;height:26px;width:175px;background-color:#fff;}
.boxtext{position:absolute;outline:none;height:26px;width:160px;left:10px;border:none;color:#666;background-color:inherit;}
.downmenus{position:absolute;top:5px;left:150px;height:16px;width:16px;font-size:10px;text-align:center;color:#fff;background:#bd4d49;}
.downmenus:hover{cursor:copy;background-color:#C30;}
.pull-down-menus{position:absolute;left:-1px;border:1px solid #e3e3e5;top:25px;list-style:none;line-height:26px;}
.pull-down-menus li{line-height:inherit;height:26px;width:175px;background:#e3e3e5;}
.pull-down-menus .options{position:absolute;text-align:left;padding-left:30px;height:26px;width:175px;line-height:inherit;border:none;color:#666;background-color:inherit;}
.pull-down-menus{display:none;}
.pull-down-menus li .options:hover{background-color:#bd4d49;color:#fff;}
.pull-down-menus_box1{top:50%;left:50%;}
SCRIPT
var mousecount1=0;
var mousecount2=0;
function lidown1(obj){
mousecount1+=1;
var x=obj.parentNode;//獲取當前span標簽的父節(jié)點，也就是div
var y=x.getElementsByTagName('ul')[0];//獲取div里的第一個標簽名為ul的標簽
judge1(mousecount1,y);
}
function judge1(mousecount1,y){
if(mousecount1%2==1){//判斷當前ul是展開還是隱藏
y.style.display="block";//將這個ul的可見性設為block
}
else{y.style.display="none";}
}
function chio1(obj){
var t=document.getElementById("boxtext1");
var v=obj.value;
v=v.replace("?","");
t.value=v;
var x=obj.parentNode;
var y=x.parentNode;
y.style.display="none";
mousecount1=0;
}
//第二個下拉菜單調用函數
/*function lidown2(obj){
mousecount2+=1;
var x=obj.parentNode;//獲取當前span標簽的父節(jié)點，也就是div
var y=x.getElementsByTagName('ul')[0];//獲取div里的第一個標簽名為ul的標簽
judge2(mousecount2,y);
}
function judge2(mousecount2,y){
if(mousecount2%2==1){//判斷當前ul是展開還是隱藏
y.style.display="block";//將這個ul的可見性設為block
}
else{y.style.display="none";}
}
function chio2(obj){
var t=document.getElementById("boxtext2");//數字要改
var v=obj.value;
v=v.replace("?","");
t.value=v;
var x=obj.parentNode;
var y=x.parentNode;
y.style.display="none";
mousecount2=0;;//數字要改
}
*/
function Ohover(obj){
obj.value="?"+obj.value;
obj.style.paddingLeft="20px";
}
function Ole(obj){
var x=obj.value;
x=x.replace("?","");
obj.value=x;
obj.style.paddingLeft="30px";
}
HTML
效果圖
2016.6.7
