商品显示模式切换

2024年1月11日 128次阅读 来源: 语折

一个简单的商品显示模式切换功能
通过学习锋利的jquery(edit 2)学到的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
        }
        div.container{
            margin: 0 auto;
            width: 400px;

            background-color: #ffd45a;
        }
        ul{
            overflow: hidden;
        }
        li{
            float: left;
            width: 100px;
            text-align: center;
            list-style-type: none;
        }
        a{
            display: block;
        }
        div#btn{
            width: 400px;
            text-align: center;
            margin: 0 auto;
        }
    </style>
    <script src="javascript/jquery-2.2.3.min.js"></script>

</head>
<body>
    <div class="container">
        <ul>
            <li><a href="">APPLE</a></li>
            <li><a href="">SONY</a></li>
            <li><a href="">SUM</a></li>
            <li><a href="">LG</a></li>
            <li><a href="">MEIZU</a></li>
            <li><a href="">MI</a></li>
            <li><a href="">OPPO</a></li>
        </ul>
    </div>
    <div id="btn"><a href="" class="btn">显示全部商品</a> </div>

    <script>
    $(function () {
       var $hi=$("ul li:nth-of-type(n+4)").hide();

            $("a.btn").click(function () {
                if($("a.btn").text()=="显示全部商品"){
                    $hi.show();
                    $("a.btn").text("显示精简模式");

                }
                else if ($("a.btn").text()=="显示精简模式"){
                    $hi.hide();
                    $("a.btn").text("显示全部商品");

                }
                return false;
            })




    })
</script>
</body>
</html>
    原文作者：语折
    原文地址: https://segmentfault.com/a/1190000005004800
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞