js模拟的下拉菜单-----起飞

最新推荐文章于 2021-10-14 11:57:46 发布

A 曦曦

最新推荐文章于 2021-10-14 11:57:46 发布

阅读量187

点赞数 1

文章标签： html5 javascript

本文链接：https://blog.csdn.net/XixiziMeng/article/details/112250598

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .select{width: 200px;height: 40px;margin: 20px auto;}
        .select span{line-height: 40px;display: block;border:solid 1px slateblue;}
        .select ul{margin: 0;padding: 0;list-style: none;border: solid 1px slateblue;border-top: none;display: none;}
        .select ul li{line-height: 40px;}
        .select ul li.active{background: yellowgreen;color: #cccccc;}
    </style>
</head>
<body>
    <select>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
    </select>

    <div class="select">
        <span class="show">北京</span>
        <ul>
            <li class="active">北京</li>
            <li>上海</li>
            <li>广州</li>
            <li>深圳</li>
        </ul>
    </div>
</body>
<script>

    var ospan = document.querySelector(".select span");
    var oul = document.querySelector(".select ul");
    var ali = oul.children;
    // 记录下拉菜单的显示或隐藏状态，0是要显示，1是要隐藏
    var type = 0;
    // 显示区域的点击事件
    ospan.onclick = function(eve){
        // 阻止冒泡
        var e = eve || window.event;

        // 初步判断是否要显示
        if (type === 0) {
            oul.style.display = "block";
            // 样式的索引找内容的索引
            // 根据内容设置样式索引
            index = contIndex;
            // 设置默认项样式

            setActive();


            // for(var i=0;i<ali.length;i++){
            //     ali[i].className = "";
            // }
            // ali[index].className = "active";
            // 将type改成下次要隐藏的状态
            type = 1;
        }else{
            oul.style.display = "none";
            // 将i改成下次要显示的状态
            type = 0;
        }
        e.stopPropagation();
    }
    document.onclick = function(){
            oul.style.display = "none";
            // 将type改成下次要显示的状态
            type = 0;
        }

//=================================

 
      //遍历所有li
  for(var i = 0;i<ali.length;i++){
      // 提前给li添加索引
      ali[i].index = i;
      // 鼠标进入li
      ali[i].onmouseover = function(){
          // 鼠标进入时，修改的是样式索引
          index = this.index;

          //清除所有li的样式
          for(var j=0;j<ali.length;j++){
              ali[j].className = "";
          }
          // 给当前li添加active
          this.className = "active";
          // setActive();
      }
      // ali[i].onmouseout = function(){
      //     this.className = "";
          
      // }

      //点击li，将内容设置到span
      ali[i].onclick = function(){
          //点击时，修改默认项为点击的Li的index，样式和内容都修改
          ospan.innerHTML = this.innerHTML;
          // 样式索引和内容的索引
          index = this.index;
          contIndex = this.index;
      }
  }
  

  // 默认要显示的下拉菜单项
  var index = 0;          //控制样式的索引
  var contIndex = 0;      //控制内容的索引


  // 根据默认项设置要显示的内容
  ospan.innerHTML = ali[contIndex].innerHTML;
  // // 设置默认项的样式

  setActive();

  // for(var i=0;i<ali.length;i++){
  //     ali[i].className = "";
  // }
  // ali[index].className = "active";


    // 封装成

        // 设置当前项的样式
    function setActive(){
        for(var i=0;i<ali.length;i++){
            ali[i].className = "";
        }
        // 修改样式时，使用样式索引
        ali[index].className = "active";
    }

//===================================


    document.onkeydown = function(eve){
        // 键盘事件执行之前，先判断下拉菜单是否隐藏
        // 下拉菜单隐藏，直接结束键盘事件
        if (type === 0) {
            return;
        }
        var e = eve || window.event;
        var code = e.keyCode || e.which;
        // 上下键修改的索引是样式的索引
        if(code === 38){
            // 上
            if (index === 0) {
                index = 0;
            }else{
                index--;
            }
            //清除所有给当前加
            setActive();
        }
        if (code === 40) {
            // 下
            if (index === ali.length-1) {
                index = ali.length-1;
            }else{
                index++;
            }
            setActive();
            // // 清除所有
            // for(var i=0;i<ali.length;i++){
            //     ali[i].className = "";
            // }
            // // 给当前加
            // ali[index].className = "active";
        }

        if (code === 13) {
            oul.style.display = "none";
            // 将type改成下次要显示的状态
            type = 0;
            // 回车时，内容发生了变化，要修改内容索引
            contIndex = index;

            ospan.innerHTML = ali[contIndex].innerHTML;
        }
    }
</script>
</html>

A 曦曦

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
js模拟的下拉菜单-----起飞

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .select{width: 200
复制链接

扫一扫