原生JS实现上拉下拉列表

2019-08-14 10:12:57来源：博客园阅读 ()

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

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>