• js点击更多显示更多内容效果


    我写了一个简单的分段显示插件,
    用法很简单:
    1,把你要分面显示的内容的容器元素增加一个class=showMoreNChildren,并增加一个自定义属性pagesize="8" 这种
    这个pagesizie有一个默认值10。可以不写

    <ul class="showMoreNChildren" pagesize="5">
                <li>a</li>
                <li>b</li>
                <li>c</li>
                <li>d</li>
                <li>e</li>
                <li>f</li>
                <li>g</li>
                <li>h</li>
                <li>i</li>
                <li>j</li>
                <li>k</li>
                <li>m</li>
    </ul>

    2,页面尾部引用这个插件js文件(在之前要先引入jquery)
       <script type="text/javascript"  src="js/jquery.showmorechildren.js"></script>
    js代码如下

    (function () {
                    var showMoreNChildren = function ($children, n) {
                        //显示某jquery元素下的前n个隐藏的子元素
                        var $hiddenChildren = $children.filter(":hidden");
                        var cnt = $hiddenChildren.length;
                        for ( var i = 0; i < n && i < cnt ; i++) {
                            $hiddenChildren.eq(i).show();
                        }
                        return cnt-n;//返回还剩余的隐藏子元素的数量
                    }
     
                    //对页中现有的class=showMorehandle的元素,在之后添加显示更多条,并绑定点击行为
                    $(".showMoreNChildren").each(function () {
                        var pagesize = $(this).attr("pagesize") || 10;
                        var $children = $(this).children();
                        if ($children.length > pagesize) {
                            for (var i = pagesize; i < $children.length; i++) {
                                $children.eq(i).hide();
                            }
              
                            $("<div class='showMorehandle' >显示更多</div>").insertAfter($(this)).click(function () {
                                if (showMoreNChildren($children, pagesize) <= 0) {
                                    //如果目标元素已经没有隐藏的子元素了,就隐藏“点击更多的按钮条”
                                    $(this).hide();
                                };
                            });
                        }
                    });
                })();

      

  • 相关阅读:
    GitLab 内存使用优化
    记一次 GitLab 的迁移过程
    MAC 最全快捷键
    IDEA中通过Java调用Python脚本报错
    远程服务调用PRC发展史
    分布式&微服务传送门
    (11)MySQL进阶篇SQL优化(InnoDB锁问题排查与解决)
    不懂物理的前端不是好的游戏开发者(一)—— 物理引擎基础
    京东购物小程序 | Taro3 项目分包实践
    浅谈树模型与集成学习-从决策树到GBDT
  • 原文地址:https://www.cnblogs.com/imsomnus/p/4000229.html
Copyright © 2020-2023  润新知