首页 > 代码库 > js点击更多显示更多内容效果

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="http://www.mamicode.com/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();                            };                        });                    }                });            })();

 

  

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