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

浏览数：60 / 时间：2015年06月09日

我写了一个简单的分段显示插件，
用法很简单：
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();
                            };
                        });
                    }
                });
            })();