Javascript 带有更多按钮的jquery移动页面_Javascript_Jquery_Css_Jquery Mobile

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

javascript jquery css jquery-mobile

Javascript 带有更多按钮的jquery移动页面,javascript,jquery,css,jquery-mobile,Javascript,Jquery,Css,Jquery Mobile,我正在建立一个j query手机页面，显示超过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"

我正在建立一个j query手机页面，显示超过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


身体








。。。。。。。。
....... 超过50种元素

您可以尝试对

li

元素使用slice并隐藏它们

首先，使用CSS隐藏所有的：

li { display: none; }
然后在JavaScript中显示前10个，并设置单击事件侦听器以显示隐藏的：

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

所以你什么都没试过，只希望有免费的代码。我不知道从哪里开始，这就是为什么我在这里问你。@Daedalus我明白你的意思，部分同意。当人们甚至不尝试的时候，这是令人沮丧的，但同时我也同情那些在网上看到太多信息却不知道从哪里开始的新手。我在这个问题上陷入了困境。这是一个JSoFDLE，我刚刚演示了如何增量显示5个：谢谢你的例子，它真的很有用！也谢谢你对像我这样的新来者的同情@很抱歉再次打扰您，我想知道能否将CSS和javascript放在脚本的开头部分？我试过了，但没用。“知道为什么吗？”李宁轩：）不客气！我不知道为什么它不起作用。。您可以将整个脚本（HTML、CSS和JavaScript）粘贴到paste中吗？（）我来看看。@mmmshuddup请检查：它在网上显示的是：所有元素都被隐藏了。非常感谢