练习demo

最新推荐文章于 2021-03-01 01:48:13 发布

原创最新推荐文章于 2021-03-01 01:48:13 发布 · 194 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#下拉列表

本文分享了一个使用HTML、CSS和JavaScript实现的下拉菜单样式升级与交互优化的案例，通过添加过渡动画、鼠标悬停效果以及自定义滚动条，提升了用户体验。代码中详细展示了如何设置元素样式，如背景颜色、边框圆角和过渡效果，并通过监听鼠标事件实现菜单的展开与收起。

下拉列表升级

编辑器制作效果展示：

在这里插入图片描述

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单</title>
    <style>
        * {list-style: none;cursor: pointer}
        li {width: 100px;height: 30px;background-color: deeppink;margin-bottom: 10px;text-align: center;transition: all 1s}
        li:hover {background-color: gold;border-radius: 50px}
        ul {border-radius: 20px;width: 150px;height: 20px;background-color: green;transition: all 0.1s;overflow: hidden}
        .d {width: 200px;height: 20px;background-color: deepskyblue;padding: 10px;overflow: hidden;margin-bottom: 10px}
        span {width: 100%;height: 20px;background-color: white;color: black;display: block;border-radius: 50px;margin-left: -16px;text-align: center;margin-bottom: 10px}
        span:hover {background-color: black;color: white}
    </style>
</head>
<body>
<div class="d">
    22222
    <ul>
        <span>11111111</span>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
    </ul>
    <ul>
        <span>11111111</span>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
    </ul>
    <ul>
        <span>11111111</span>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
    </ul>
</div>
<div class="d">
    33333
    <ul>
        <span>11111111</span>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
    </ul>
    <ul>
        <span>11111111</span>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
    </ul>
    <ul>
        <span>11111111</span>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
    </ul>
</div>
<script>
    var odiv = document.querySelectorAll("div");
    var os = document.querySelectorAll("span");
    var od = document.querySelectorAll(".d");
    var oli1 = document.querySelectorAll("li");
    var ou = document.querySelectorAll("ul");
    document.onmouseup = function () {
        for (var i = 0; i < odiv.length; i++) {
            odiv[i].style.height = "";
        }
        for (var i = 0; i < ou.length; i++) {
            ou[i].style.height = "";
            ou[i].style.overflow = "";
            ou[i].scrollTop = "0";
        }
    }
    for (var i = 0; i < odiv.length; i++) {
        odiv[i].onclick = function () {
            for (var j = 0; j < odiv.length; j++) {
                odiv[j].style.height = "";
            }
            this.style.height = "100%";
        }
    }
    for (var i = 0; i < os.length; i++) {
        os[i].addEventListener("click", run);
    }
    for (var i = 0; i < od.length; i++) {
        od[i].onmouseup = function () {
            for (var i = 0; i < ou.length; i++) {
                ou[i].style.height = "";
                ou[i].style.overflow = "";
                ou[i].scrollTop = "0";
            }
        }
    }
    function run(e) {
        var e = e || event;
        var oul = e.srcElement.parentNode;
        for (var i = 0; i < ou.length; i++) {
            ou[i].style.height = "";
            ou[i].style.overflow = "";
            ou[i].scrollTop = "0";
        }
        oul.style.height = "250px";
        oul.style.overflow = "auto";
    }
</script>
</body>
</html>

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