Jquery “如何拥有twitter”；“显示更多”；没有ajax的效果？

我有一份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();
});

函数页面选择回调（页面索引，jq）{
//从表单中获取每个分页页的元素数
每页风险值项目=2；
var max_elem=Math.min（（页面索引+1）*每页项目数，成员数.长度）；
var newcontent=''；
//遍历所选内容并构建HTML字符串
对于（var i=每页索引*项目；i
当然


演示在这里：

当然可以


演示在这里：

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

您可以使用jQuery和CSS隐藏元素。
您可以在“显示更多”链接上切换此选项，并将此链接替换为“显示较少”链接



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

您可以使用jQuery和CSS隐藏元素。
您可以在“显示更多”链接上切换此选项，并将此链接替换为“显示较少”链接



我能想到的最简单的方法是通过几个隐藏显示链接

将此简单代码添加到页面底部

    <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>


$（文档）.ready（函数（）{
//为显示/隐藏链接选择文本-可以包含HTML（例如图像）
var showText='expand'；
var hideText='hide'；
//初始化可见性检查
var为可见=假；
//使用“toggle”类将显示/隐藏链接附加到元素前面的元素
$（'.toggle'）.prev（）.append（''）；
//使用“toggle”类隐藏所有元素
$（'.toggle'）.hide（）；
//捕获切换链接上的单击
$（'a.toggleLink'）。单击（函数（）{
//根据图元是显示还是隐藏，更改链接
if（$（this.html（）==hideText）{
$（this）.html（showText）；
$（this.removeClass（'hide'）；
$（this.parent（）.removeClass（'purple'）；
}
否则{
$（this.html（hideText）；
$（this.addClass（'hide'）；
$（this.parent（“h2”）.hide（）；
}
//切换显示-取消注释下一行的基本“手风琴”样式
$（this.parent（）.next（'.toggle'）.toggle（）；
//返回false，因此不遵循任何链接目标
返回false；
});
});

然后将每组10件物品包装起来，如

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


显示更多
{10个结果去听！！}

要完全补偿这段代码，请转到
我能想到的最简单的方法是通过几个隐藏显示链接

将此简单代码添加到页面底部

    <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>


$（文档）.ready（函数（）{
//为显示/隐藏链接选择文本-可以包含HTML（例如图像）
var showText='expand'；
var hideText='hide'；
//初始化可见性检查
var为可见=假；
//使用“toggle”类将显示/隐藏链接附加到元素前面的元素
$（'.toggle'）.prev（）.append（''）；
//使用“toggle”类隐藏所有元素
$（'.toggle'）.hide（）；
//捕获切换链接上的单击
$（'a.toggleLink'）。单击（函数（）{
//根据图元是显示还是隐藏，更改链接
if（$（this.html（）==hideText）{
$（this）.html（showText）；
$（this.removeClass（'hide'）；
$（this.parent（）.removeClass（'purple'）；
}
否则{
$（this.html（hideText）；
$（this.addClass（'hide'）；
$（this.parent（“h2”）.hide（）；
}
//切换显示-取消注释下一行的基本“手风琴”样式
$（this.parent（）.next（'.toggle'）.toggle（）；
//返回false，因此不遵循任何链接目标
返回false；
});
});

然后将每组10件物品包装起来，如

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


显示更多
{10个结果去听！！}

对于此代码的完整补偿，转到
当然隐藏链接是我添加的。您隐藏旧的“更多”按钮或将其放置在底部，并将目标/选择器替换到下一个要显示的元素。当然隐藏链接是我添加的。您隐藏旧的“更多”按钮或将其放置在底部，并替换目标/选择器to下一个要显示的元素。谢谢！这实际上比我想要的要好。但是，我在编写回调函数时遇到了一些问题…首先选择帮助您的答案。然后打开一个新问题：）谢谢！这实际上比我想要的要好。但是，我在编写回调函数时遇到了一些问题…首先选择对您有帮助的答案。然后打开一个新问题：）