CSS模拟下拉菜单

亦凉 2022-11-21 11:37 205阅读 0赞

## 啥也不说了直接上菜（怎么实现的注解里有） ##

<!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <title></title>
      <style type="text/css">
        * {
          margin: 0;
          padding: 0;
          list-style: none;
        }
    
        #cont {
          width: 300px;
          margin: 40px auto;
        }
    
        input {
          width: 296px;
          height: 40px;
        }
    
        ul {
          background: #eee;
          display: none;
        }
    
        ul li {
          line-height: 30px;
          text-indent: 20px;
          border-bottom: solid 1px black;
        }
    
        ul li.active {
          background: #ccc;
        }
      </style>
    </head>
    
    <body>
      <div id="cont">
        <input type="text" name="" id="txt" value="" />
        <ul>
          <li>选项1</li>
          <li>选项2</li>
          <li>选项3</li>
          <li>选项4</li>
          <li>选项5</li>
          <li>选项6</li>
        </ul>
      </div>
    </body>
    <script>
      //获取节点
      var inputObj = document.getElementById("txt");
      var ulObj = document.getElementsByTagName("ul")[0];
      var lisObj = ulObj.children;
      // ulObj.addEventListener()
    
      //保存li对应的索引值
      var index = -1;
      //给input绑定焦点事件，获取焦点时显示ul
      inputObj.onfocus = function () {
        //点击显示
        ulObj.style.display = "block";
      }
      //失去焦点时隐藏UL
      inputObj.onblur = function () {
        //隐藏ul
        ulObj.style.display = "none";
      }
      //循环，绑定鼠标移入事件，设置class= “active”
      for (var i = 0; i < lisObj.length; i++) {
        //将当前li对应的索引值，保存到li对象
        lisObj[i].index = i;
        //绑定鼠标移入事件
        lisObj[i].onmouseover = function () {
          //将li对象上保存的index属性，取出来放到全局变量中
          index = this.index;
          //调用设置选中样式的函数
          select();
        }
      }
      //设置选中li的样式，及input内容的显示
      function select() {
        //先取消li中所有的class
        for (var i = 0; i < lisObj.length; i++) {
          lisObj[i].className = "";
        }
        lisObj[index].className = "active";
        //让li的内容，显示在input中
        //获取li标签的内容
        var text = lisObj[index].innerHTML;
        //放到input框中
        inputObj.value = text;
      }
      //设置按键上下移动选中
      //给inputObj绑定键盘事件
      inputObj.onkeydown = function (event) {
        var e = event || window.event;
        var code = e.which || e.keyCode;
        if (code == 38) {
          if (index == -1 || index == 0) index = lisObj.length - 1
          else index--;
          select();
        }
        if (code == 40) {
          if (index == lisObj.length - 1) index = 0;
          else index++;
          select();
        }
      }
    
    </script>
    
    </html>