为了账号安全,请及时绑定邮箱和手机立即绑定

虽然写出来了但是有个bug看在坐有没有大神能帮忙解决一下


window.onload=function(){
	var box=document.getElementById('divselect'),
	    title=box.getElementsByTagName('cite')[0],
	    menu=box.getElementsByTagName('ul')[0],
	    as=box.getElementsByTagName('a'),
        index=-1,
		flog=0;
   
    // 点击三角时
    title.onclick=spread;
    
   // 滑过滑过、离开、点击每个选项时
for(var i=0;i<as.length;i++){
	   as[i].onmouseover=gray;
	    as[i].onmouseout=bland;
		as[i].onclick=cli;
	document.onkeyup=choose;	
}
	   
   // 点击页面空白处时
   document.onclick=Close;

function choose(event){
	event=event ||window.event;
		if(index<-1){
			index=as.length;	
		}else if(index>as.length){
			index=-1;			
		}else{
			menu.style.display="block";
			}
			if(event.keyCode==40){	
				index+=1;
				for(var j=0;j<as.length;j++){
					as[j].style.backgroundColor="#FFF";
					}
				as[index].style.backgroundColor="#ccc";
			}else if(event.keyCode==38){
				index-=1;
				for(var j=0;j<as.length;j++){
					as[j].style.backgroundColor="#FFF";
					}
				as[index].style.backgroundColor="#ccc";
			}else if(event.keyCode==13){
				title.innerHTML=as[index].innerHTML;
				menu.style.display="none";
			}
}
function cli(){
	title.innerHTML=this.innerHTML;
	}
function bland(){
	this.style.backgroundColor="#FFF";
		   }
function gray(){
	this.style.backgroundColor="#ccc";
		   }   
function spread(event){
      event=event ||window.event;
	  if(flog==0){
		  menu.style.display="block";
		  flog=1;		  
			  }else{
		  menu.style.display="none";
		  flog=0;  
			  }
	  if(event.stopPropagation()){
		  event.stopPropagation();
		  }else{
			event.cancelBubble();  
		}
	  // 执行脚本
} 
function Close(){
       // 执行脚本
	   menu.style.display="none";	   
} 
 }

就是键盘选择的时候,按到头(最上或者最下)就需要再按两下才能接上,这个问题我也知道出在哪,判断index时,如果是4就会有问题了,所以需要按两下。但是以目前水平确实没有好的办法

正在回答

1 回答

你的 index 判断那部分写的有些不合理,你看看我的,判断其实没那么麻烦

window.onload = function() {
    var box = document.getElementById('divselect'),
        title = box.getElementsByTagName('cite')[0],
        menu = box.getElementsByTagName('ul')[0],
        as = box.getElementsByTagName('a'),
        index = -1;
    
    var items = menu.getElementsByTagName('a');

    // 点击三角时
    title.onclick = function(event) {
        var e = event || window.event;
        if (e.stopPropagation) {
            e.stopPropagation();
        } else if (e.cancelBubble) {
            e.cancelBubble = false;
        }
        // 执行脚本
        menu.style.display = 'block';
        index=-1;
        setItemStyle(index);
    };

    // 滑过滑过、离开、点击每个选项时
    // 执行脚本
    for (var i = 0; i < as.length; i++) {
        var a = as[i];
        a.onmouseenter = function(event) {
            var e = event || window.event;
            e.target.style.backgroundColor = '#cc00cc';
            e.target.style.color = '#fff';
        };
        a.onmouseout = function(event) {
            var e = event || window.event;
            e.target.style.backgroundColor = '#fff';
            e.target.style.color = '#222';
        };
        a.onclick = function(event) {
            title.innerHTML = event.target.innerHTML;
        };

    }

    // 点击页面空白处时
    // 执行脚本
    document.documentElement.onclick = function(event) {
        menu.style.display = 'none';
    };
    document.documentElement.onkeydown = function(event) {
        var e = event || window.event;
        var
            key_enter = 13,
            key_up = 38,
            key_down = 40,
            item_len = menu.children.length - 1;
            
        if (e.stopPropagation) {
            e.stopPropagation();
        } else if (e.cancelBubble) {
            e.cancelBubble = false;
        }
        
        if (e.keyCode === key_enter) {
            title.innerHTML = items[index].innerHTML;
            index = -1;
            setItemStyle(index);
            menu.style.display = 'none';
        } else if (e.keyCode === key_up) {
            if (index <= 0) {
                index = item_len;
            }else{
                index--;
            }
            setItemStyle(index);
        } else if (e.keyCode === key_down) {
            if (index >= menu.children.length - 1) {
                index = 0;
            }else{
                index++;
            }
            setItemStyle(index);
        }
    };

    function setItemStyle(index) {
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            item.style.color = '#222';
            item.style.backgroundColor = '#fff';
        }
        if (index <= items.length && index >= 0) {
            items[index].style.backgroundColor = '#ddd';
        }
    }
}


0 回复 有任何疑惑可以回复我~
#1

我要坚持11 提问者

已经找到了,没写=号就这样,写了=号就好了
2017-06-09 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

虽然写出来了但是有个bug看在坐有没有大神能帮忙解决一下

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信