前端列表筛选效果

萧逸才

于 2017-04-03 17:41:55 发布

阅读量3.4k

点赞数

分类专栏：前端 jquery 文章标签：前端

本文链接：https://blog.csdn.net/xyc_csdn/article/details/68962563

版权

前端同时被 2 个专栏收录

26 篇文章

订阅专栏

jquery

12 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
<input type="text">
<ul>
    <ol>0</ol>
    <ol>01</ol>
    <ol>012</ol>
    <ol>0123</ol>
    <ol>01234</ol>
    <ol>012345</ol>
    <ol>0123456</ol>
    <ol>01234567</ol>
    <ol>012345678</ol>
    <ol>0123456789</ol>
    <ol>0123456789</ol>
</ul>
<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
<script>
    $(function () {
        $("input").change(function () {
            var val = $(this).val();
            if (!val) {
                $("ol").slideDown();
                return;
            }
            var $showOl = $("ol:contains(" + val + ")")
            $("ol").not($showOl).slideUp();
            $showOl.slideDown();
        }).keyup(function () {
            $(this).change();
        });
    });
</script>
</body>
</html>