js 클릭 하여 더 많은 콘 텐 츠 효과 표시

7027 단어 js
나 는 간단 한 세그먼트 디 스 플레이 플러그 인 을 썼 습 니 다. 사용 방법 은 매우 간단 합 니 다. 1. 당신 이 나 누 어 표시 할 내용 의 용기 요 소 를 class = showMoreNChildren 에 추가 하고 사용자 정의 속성 pagesize = "8" 을 추가 합 니 다. 이 페이지 는 기본 값 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 > 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();

                            };

                        });

                    }

                });

            })();

 

좋은 웹페이지 즐겨찾기