如何让 Twitter“显示更多”有效果但没有ajax？

Question

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

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

谢谢你！

编辑：感谢 Royi Namir 提供的链接。我试图在 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://th3silverlined.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/

Answer 2

确保

http://plugins.jquery.com/project/pagination

演示在这里：

http://d-scribe.de/webtools/jquery-pagination/demo/demo_options.htm

Answer 3

我能想到的最简单的方法是通过一些隐藏显示链接。

将这个简单的代码添加到页面底部。

    <script type="text/javascript">
  $(document).ready(function () {
        // choose text for the show/hide link - can contain HTML (e.g. an image)
        var showText = 'expand';
        var hideText = 'hide';

        // initialise the visibility check
        var is_visible = false;

        // append show/hide links to the element directly preceding the element with a class of "toggle"
        $('.toggle').prev().append(' <a href="#" class="toggleLink">' + showText + '</a>');

        // hide all of the elements with a class of 'toggle'
        $('.toggle').hide();

        // capture clicks on the toggle links
        $('a.toggleLink').click(function () {

            // change the link depending on whether the element is shown or hidden
            if ($(this).html() == hideText) {
                $(this).html(showText);
                $(this).removeClass('hide');
                $(this).parent().removeClass('purple');
            }
            else {
                $(this).html(hideText);
                $(this).addClass('hide');
                $(this).parent("h2").hide();
            }

            // toggle the display - uncomment the next line for a basic "accordion" style
            $(this).parent().next('.toggle').toggle();

            // return false so any link destination is not followed
            return false;

        });
    });
</script>

然后只需将每组十个项目包装起来，例如

<div class="nextresults">
        <h2 class="more">Show More</h2>
         <div class="toggle">
           {10 results go hear!!}    
         </div>
  </div>

对于此代码的完整解释，请转到 http://andylangton.co.uk/articles/javascript/jquery-show-hide-multiple-elements/