使用js仿写一个原生下拉列表框

最新推荐文章于 2021-09-15 20:09:58 发布

QUAN-铨

最新推荐文章于 2021-09-15 20:09:58 发布

阅读量253

点赞数

分类专栏： js 文章标签： css js html

本文链接：https://blog.csdn.net/abcquan123/article/details/108225112

版权

js 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

使用js仿写一个原生下拉列表框

直接上代码，有注释

这里在选择那里额外加了一个小图片

目录截图

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用js仿写一个原生下拉列表框</title>
    <style>
        li,ul{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .btn{
            position: relative;
            display: block;
            height: 40px;
        }
        .btn,.box{
            margin: 0 auto;
            width: 100px;
            text-align: center;
            background-color: skyblue;
            line-height: 40px;
            user-select: none;
        }
        .box{
           display: none;
        }
        .box li{
            border-top: 1px solid #eee;
            /* 高度变得很小的时候，字会超出来，影响视觉效果 */
            overflow: hidden;
            /* height: 40px; */
        }
        .box li:hover{
            background-color: #ffffff;
            color: black;
        }
        /* 右侧小图标 */
        .btn img{ 
            position: absolute;
            right: 5px;
            top: 12px;
            width: 16px;
            height: 16px;
            /* 旋转的过渡效果 */
            transition: all 0.5s ease;
        }
    </style>
</head>
<body>
    <span class="btn">请选择<img class="icon" src="./img/top.png"></img></span>
    <div class="box">
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JAVASCRIPT</li>
            <li>C</li>
            <li>C++</li>
            <li>C#</li>
        </ul>
    </div>
    <script>
        // 获取元素
        let btn=document.querySelector('.btn')
        let box=document.querySelector('.box')
        let lis=document.querySelectorAll('li')
        let icon=document.querySelector('.icon')
        // 一开始进来就设置   这里不设置一下，第一次进判断的时候box.style.display为空   不知道为什么，欢迎指正
        box.style.display='none'
        // 下拉
        function slideDown(){
            let startHeight=0,endHeight=40
            let timer=setInterval(function(){
                startHeight++
                lis.forEach(item => {
                    item.style.height=startHeight+'px'
                });
                // 相等了就去掉定时器
                if(startHeight>=endHeight){
                    clearInterval(timer)
                }
            },10)
            // 延迟才有动画效果
            setTimeout(function(){
                box.style.display='block'
            },100)
        }
        // 上拉
        function slideUp(){
            let startHeight=40,endHeight=0
            let timer=setInterval(function(){
                startHeight--
                lis.forEach(item => {
                    item.style.height=startHeight+'px'
                });
                if(startHeight<=endHeight){
                    clearInterval(timer)
                }
            },10)
            // 延迟才有动画效果
            setTimeout(function(){
                box.style.display='none'
            },350)
        }
        // console.log(box.style.display)//不加上面56行代码的时候，这里一开始输出空
        btn.addEventListener('click',function(){
            if(box.style.display=='none'){
                icon.style.transform='rotate(180deg)'
                slideDown()
            }else{
                icon.style.transform='rotate(0deg)'
                slideUp()
            }
        })
    </script>
</body>
</html>

作为自己学习过程的小练习，有什么问题和错误欢迎指正

QUAN-铨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用js仿写一个原生下拉列表框

使用js仿写一个原生下拉列表框直接上代码，有注释这里在选择那里额外加了一个小图片目录截图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用js仿写一个原生下拉列表框&lt
复制链接

扫一扫

专栏目录