个回答

• Yuki丶Sakura

  2017-06-05 23:39:39

  你的 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