JQuery实现交替显示部分或全部元素

最新推荐文章于 2022-01-10 16:59:41 发布

somnus_ly

最新推荐文章于 2022-01-10 16:59:41 发布

阅读量695

点赞数

分类专栏： jquery小结文章标签：部分与全部显示

本文链接：https://blog.csdn.net/somous_ly/article/details/38402157

版权

jquery小结专栏收录该内容

5 篇文章 0 订阅

订阅专栏

用JQuery实现一个交替显示部分或全部的常用实例，如相机品牌的全部与部分列出。
<script src ="Script/jquery-1.3.2-vsdoc2.js"></script>
<script>
        $(function() {
            var $category = $('ul li:gt(5):not(:last)');
            $category.hide();
            var $toggleBtn = $('div.showmore > a');
            $toggleBtn.click(function() {
                if ($category.is(":visible")) {
                    $category.hide();
                    $('.showmore a span').css("background", "yellow").text("显示全部");
                    $('ul li').removeClass("promoted");
                }
                else {
                    $category.show();
                    $category.show();
                    $('.showmore a span').css("background", "Green").text("显示部分");
                    $('ul li').filter(":contains('佳能') , : contains('尼康') , : contains('奥林巴斯')").addClass("promoted");
                }
                return false;
            });
            //上面的if-else可以换为toggle(),即为$toggleBtn.toggle(function(){...},function(){...})
</script>
body里面：
    <div class = "SubCategoryBox">
    <ul>
    <li><a href = "#">佳能</a><i>(30440)</i></li>
    <li><a href = "#">索尼</a><i>(27220)</i></li>
    <li><a href = "#">三星</a><i>(20808)</i></li>
    <li><a href = "#">尼康</a><i>(17821)</i></li>
    <li><a href = "#">松下</a><i>(12289)</i></li>
    <li><a href = "#">卡西欧</a><i>(8284)</i></li>
    <li><a href = "#">富士</a><i>(14894)</i></li>
    <li><a href = "#">柯达</a><i>(9520)</i></li>
    <li><a href = "#">宾得</a><i>(2195)</i></li>
    <li><a href = "#">理光</a><i>(4114)</i></li>
    <li><a href = "#">奥林巴斯</a><i>(12205)</i></li>
    <li><a href = "#">明基</a><i>(1466)</i></li>
    <li><a href = "#">爱国者</a><i>(3091)</i></li>
    <li><a href = "#">其他品牌相机</a><i>(7275)</i></li>
    </ul>
    </div>
    <div class = "showmore">
    <a href = "more.html"><span>显示全部品牌</span></a>
    </div>