jquery - 如何在没有ajax的情况下获得twitter "show more"效果？

Question

我有一个包含 50 项的无序列表。我想一次只显示 10 个，并在底部有一个“更多”链接。 Exactly like this只是没有ajax，因为我不需要它。

您能给我一些提示或指导我如何实现此效果的教程吗？

谢谢!

编辑:感谢 Royi Namir the link 。我试图在 10 个列表中每页显示 2 个项目，但无法弄清楚我做错了什么...

JS

function pageselectCallback(page_index, jq){
                // Get number of elements per pagionation page from form
                var items_per_page = 2;
                var max_elem = Math.min((page_index+1) * items_per_page, members.length);
                var newcontent = '';

                // Iterate through a selection of the content and build an HTML string
                for(var i=page_index*items_per_page;i<max_elem;i++)
                {
                                      newcontent = jQuery('#hiddenresult div.result:eq('+i+')').append();
                }

                // Replace old content with new content
                $('#Searchresult').html(newcontent);

                // Prevent click eventpropagation
                return false;
}

/** 
 * Initialisation function for pagination
 */
function initPagination() {
        // Create content inside pagination element
        $("#Pagination").pagination(10, {
                callback: pageselectCallback,
                load_first_page:true,
                items_per_page:2 
        });
 }

// When document is ready, initialize pagination
$(document).ready(function(){      
        initPagination();
});

HTML:

<div id="Pagination"></div>
    <br style="clear:both;" />
    <div id="Searchresult">
        This content will be replaced when pagination inits.
    </div>

    <!-- Container element for all the Elements that are to be paginated -->
    <div id="hiddenresult" style="display:none;">
        <div class="result">111</div>
        <div class="result">222</div>
        <div class="result">333</div>
        <div class="result">444</div>
    </div>

编辑#2:找到了我的答案:D http://th3silverlining.com/2010/04/15/pajination-a-jquery-pagination-plugin/

Answer 1

如果您不想使用 AJAX，请加载完整内容。

您可以使用 jQuery 和 CSS 隐藏元素。以 show() 和 hide() 为例。您也可以通过点击显示更多链接来切换此链接，并将此链接替换为显示更少链接。

http://api.jquery.com/show/
http://api.jquery.com/hide/