原生JS实现上拉下拉列表

话不多说，代码上来，有些知识点直接就在注释里

html

    <div class="list-down">
        <button id="btn">选择项</button>
        <ul id="list-chooses" style="display: none;">
            <li><a href="#">python</a></li>
            <li><a href="#">javascript</a></li>
            <li><a href="#">java</a></li>
            <li><a href="#">php</a></li>
            <li><a href="#">c++</a></li>
            <li><a href="#">c语言</a></li>
            <li><a href="#">android</a></li>
            <li><a href="#">微信小程序</a></li>
            <li><a href="#">node.js</a></li>
            <li><a href="#">bootstrap</a></li>
            <li><a href="#">html && css</a></li>
            <li id="close"><a href="#">关闭</a></li>
        </ul>
    </div>

css

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 16px;
            /* 消除按钮点击之后默认出现的蓝色边框 */
            outline: none;
        }
        ul {
            list-style: none;
        }
        .list-down {
            width: 150px;
            margin: 10px auto;
            text-align: center;
        }
        .list-down button {
            width: 150px;
            height: 40px;
            cursor: pointer;
            background-color: #ea6f5a;
            border: none;
            color: #ccc;
        }
        .list-down button:hover {
            color: #fff;
            font-size: 17px;
            font-style: 2000;
        }
        .list-down button:focus {
            border: none;
        }

        .list-down #list-chooses {
            border-top: 1px solid #ddd;
        }
        .list-down #list-chooses li {
            width: 150px;
            height: 0;
            line-height: 40px;
            background-color: #ea6f5a;
        }
        .list-down #list-chooses li a {
            color: #ccc;
            text-decoration: none;
        }
        .list-down #list-chooses li:hover a {
            color: #fff;
            font-size: 17px;
            font-style: 2000;
        }
        .list-down #list-chooses li#close {
            border-top: 1px solid #ddd;
        }
    </style>

javascript

    <script type="text/javascript">

        window.onload = () => {
            const listbtn = document.getelementbyid('btn')
            const lists = document.getelementbyid('list-chooses');
            const listslis = lists.queryselectorall('li');
            const listsclosebtn = document.getelementbyid('close');

            // 列表选项从上而下出现
            let listdown = () => {
                let startheight = 0;
                let stopheight = 40;

                let timeid = setinterval(() => {
                    startheight++;
                    // 注意：foreach() 方法在 ie8 以下不支持
                    listslis.foreach((item) => {
                        item.style.height = startheight + 'px';
                    });
                    if (startheight >= stopheight) {
                        clearinterval(timeid);
                    }
                }, 10);

                lists.style.display = 'block';
            };

            // 列表选项从下而上消失
            let listup = () => {
                let startheight = 40;
                let stopheight = 0;

                let timeid = setinterval(() => {
                    startheight--;
                    listslis.foreach((item) => {
                        item.style.height = startheight + 'px';
                    });
                    if (startheight <= stopheight) {
                        clearinterval(timeid);
                    }
                }, 10);

                // 这里，如果不延时的话，会直接消失，而没有上拉的效果
                settimeout(() => {
                    lists.style.display = 'none';
                }, 350);
            };

            // 如果列表选项为隐藏，点击则显示；如果列表选项为显示，点击则隐藏
            listbtn.addeventlistener('click', () => {
                if (lists.style.display == 'none') {
                    listdown();
                } else {
                    listup();
                }
            });

            listsclosebtn.addeventlistener('click', () => {
                listup();
            });
        };
    </script>