带有更多按钮的jquery移动页面答案

【问题标题】：jquery mobile page with more button带有更多按钮的jquery移动页面
【发布时间】：2012-11-01 21:12:35
【问题描述】：

我正在设置一个 j 查询移动页面，显示超过 50 个元素，关于如何在打开页面时仅显示前 10 个元素的任何建议，以及底部的更多按钮，如果单击它可以显示所有元素。我的脚本是：

<body> 

<div data-role="page" data-add-back-btn="true" data-back-btn-text="Back" >
<div data-role="header" >
<h1 style="white-space:normal">body</h1>

</div>
<ul  data-role="listview" data-inset="true" data-filter="false">
<li><a href="http://www.mydomain.co.nz/users/262/">Feature listings</a>   </li>

<ul data-role="listview" data-filter="false">

<table>

<li>
    <a href="/users/264/properties/50473">
        <img src="/media/2012/11/01/011528_47689.jpg?m=resize&o[geometry]=80x60&s=f9e49fbb929e8d1b" />          
        <h3>7C/192 Willis Street</font></font></font>, Beijing</h3>
    <p>Buyer Enquiry Over $305,000<br />Ref: 47689</p></a>
</li>  

<li>
    <a href="/users/264/properties/50474">
        <img src="/media/2012/11/01/011533_47722.jpg?m=resize&o[geometry]=80x60&s=b4482c7638c512b4" />          
        <h3>606/35 Abel Smith Street</font></font></font>, Te Aro</h3>
        <p>Tender<br />Ref: 47722</p></a>
</li>

<li>
    <a href="/users/264/listings/50476">
        <img src="/media/2012/11/01/011539_47691.jpg?m=resize&o[geometry]=80x60&s=66def46f1524e177" />
        <h3>8/34 William Street</font></font></font>, Hataitai</h3>
        <p>Buyer Enquiry Over $280,000<br />Ref: 47691</p></a>
</li>  ........
....... over 50 elements

【问题讨论】：

所以.. 你什么都没试过，期待免费代码。
我不知道从哪里开始，所以我在这里问。
@Daedalus 我明白你的意思并部分同意。当人们甚至不尝试时，这是令人沮丧的，但同时我对那些在网上看到太多信息并且不知道从哪里开始的新人表示同情。我在这个问题上陷入了困境。

标签： javascript jquery css jquery-mobile

【解决方案1】：

您可以尝试将 slice 与您的 li 元素一起使用并隐藏它们。

首先，用 CSS隐藏所有：

li { display: none; }

然后在JavaScript中显示前10个，并设置点击事件监听器显示隐藏的：

$('li').slice(0,10).css('display', 'block');
$('#more-button').click(function() {
    $('li:hidden').show();
});

【讨论】：

这是一个 JSFiddle，我刚刚展示了如何增量显示 5 个：jsfiddle.net/kysGX
非常感谢这个例子，它真的很有帮助！也感谢您对像我这样的新人的同情！
@mmmshuddup 很抱歉再次打扰您，只是想知道我可以将 CSS 和 javascript 放在脚本的头部吗？我试过但没有用。知道为什么吗？
@LiNingXuan :) 不客气！我不知道为什么它不起作用。你能把整个脚本（HTML、CSS 和 JavaScript）粘贴到一个馅饼中吗？ (pastie.org) 我去看看。
@mmmshuddup 请查看：pastie.org/5170232，它在网上显示的是：xuanyinwen.com/mobile/examples/remax.htm 所有元素都被隐藏了。非常感谢