<ul> <li> <ul> <li>嵌套显示更多jquery

时间:2019-06-10 08:19:14

标签: jquery html css

使用Jquery在列表中显示前20个项目>当用户单击更多时,它应该显示20个以上(40),依此类推。 ul未显示在加载状态-用户必须单击“更多加载”才能加载前20个项目

ul代码如下所示:-

<ul class="ulTbl" id="ReviewList" style="display: none">
    @foreach (var review in Model)
    {
        <li class="hreview">
             <div>
                <p class="summary">@title</p>
                <p class="description">@ReviewText</p>

               <span class="moreLink" style="display: inline- 
               block;">"Read More"</span>
               <span class="lessLink" style="display: none;">"Read Less" 
               </span>
             </div>                
        </li>
    }
</ul>

显示更多 显示较少

我尝试了各种方法来显示该广告,但无济于事

jQuery('ul.ulTbl').each(function()
{
   if(jQuery(this).children('li').length <10)
   {
      jQuery(this).children('li:lt(5)').show();
      jQuery(this).append('<button class="loadMore">LoadMore</button>');
   }
});  
jQuery('.loadMore').click(function ()
{
   jQuery(this).parent('ul.ulTbl').children('li:gt(5)').show(); // use gt 
   instead of lt
 });

$('#ReviewList li:lt('+2+')').show();

$('#ReviewList > li').slice(0, 2).show();

我希望ul首先显示20个项目,然后再显示40个项目,依此类推

0 个答案:

没有答案