练习demo

最新推荐文章于 2024-10-29 18:59:46 发布

原创最新推荐文章于 2024-10-29 18:59:46 发布 · 155 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#下拉列表

本文分享了一个使用HTML、CSS和JavaScript实现的下拉菜单编辑器效果，通过按钮点击展示和隐藏菜单项，并实现了菜单项的选择功能。

下拉菜单

编辑器制作效果展示：

在这里插入图片描述

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {margin: 0;padding: 0}
        #d {background-color: deeppink;transition: all 0.2s;width: 200px;height: 60px;border: 2px solid red;position: absolute;left: 50%;margin-left: -100px;top: 20px}
        .d {transition: all 0.5s;cursor: pointer;display: none;font-size: 30px;color: white;background-color: deeppink;width: 200px;height: 50px;border-bottom: 1px solid black;box-sizing: border-box;text-align: center;line-height: 50px}
        .d:hover {background-color: black;color: white;transform: scale(1.2)}
        .bt {outline: 0;width: 200px;height: 60px;border: 2px solid gold;font-size: 30px;color: green}
        .s {box-sizing: border-box;border: 1px solid orange;cursor: pointer;transition: all 0.5s;position: absolute;right: 0;top: 0px;background-color: gold;border-radius: 50%;display: block;width: 60px;height: 60px;text-align: center;line-height: 60px;font-size: 40px}
        .s:hover {background-color: orange}
        .s:active {background-color: deeppink;color: white}
    </style>
</head>
<body>
<div id="d">
    <button class="bt">选择</button>
    <span class="s">↓</span>
</div>
<script>
    var bol = true;
    var od1 = document.querySelector("#d");
    var obt = document.querySelector(".bt");
    var os = od1.querySelector("span");
    // 导入数据
    var arr = [1, 2, 3, 4, 5, 6, 7];
    // 创建列表
    for (var i = 0; i < arr.length; i++) {
        var od = document.createElement("div");
        od1.appendChild(od);
        od.className = "d";
        od.innerText = arr[i];
    }
    obt.addEventListener("click", run);
    function run() {
        bol = !bol;
        console.log(bol);
        bol ? (yc()) : (ycc());
    }
    os.addEventListener("click", run);
    function run() {
        bol = !bol;
        console.log(bol);
        bol ? (yc()) : (ycc());
    }
    cldiv();
    // 展示选择的信息
    function cldiv() {
        var od = document.querySelectorAll(".d");
        for (var i = 0; i < od.length; i++) {
            od[i].addEventListener("click", run);
            function run() {
                obt.innerText = this.innerText;
                yc();
            }
        }
    }
    // 箭头特效
    function yc() {
        var od = document.querySelectorAll(".d");
        for (var i = 0; i < od.length; i++) {
            od[i].style.display = "";
        }
        od1.style.height = "";
        bol = true;
        os.style.transform = "rotate(0deg)";
    }
    function ycc() {
        var od = document.querySelectorAll(".d");
        for (var i = 0; i < od.length; i++) {
            od[i].style.display = "block";
        }
        os.style.transform = "rotate(180deg)";
        od1.style.height = (arr.length + 1) * 51 + "px";
    }
</script>
</body>
</html>

整理笔记时发现自己做的小demo,传上来了，么么哒！