CSS模拟下拉菜单

最新推荐文章于 2023-03-14 14:55:17 发布

LeviAckerman_Js

最新推荐文章于 2023-03-14 14:55:17 发布

阅读量266

点赞数

分类专栏：面试 JavaScript HTML 文章标签： js css javascript vue html5

本文链接：https://blog.csdn.net/qq_45279574/article/details/109422736

版权

JavaScript 同时被 3 个专栏收录

42 篇文章 3 订阅

订阅专栏

面试

16 篇文章 0 订阅

订阅专栏

HTML

14 篇文章 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>

LeviAckerman_Js

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS模拟下拉菜单

啥也不说了直接上菜（怎么实现的注解里有）<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; list-style: none; } #cont { w
复制链接

扫一扫

专栏目录