實現jquery閱讀更多＆顯示較少的動態li標籤

在我的代碼li標籤是使用PHP生成的。它是動態的，有時可能超過3 li標籤，有時小於3 li標籤。在這種情況下，我必須顯示'閱讀更多'和'顯示更少'時li標籤超過3。實現jquery閱讀更多＆顯示較少的動態li標籤

在這裏，我展示了我的html和jQuery，我試過了。有沒有其他簡單的方法來實現這一點。

 <html> 
    <head> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
     <script> 

     $(document).ready(function(){ 

     var a = $(".bul5 li").length; 

     if (a > 3) 
     { 
      $("ul li:nth-child(3)").append("<span class='readMore'> Read More...</span>"); 

     } 
     for(i = 3; i<a; i++) 
     { 
      $("li").eq(i).hide(); 

     } 
     $('.readMore').click(function(event){  
      for(i = 3; i<a; i++) 
      { 

       $("li").eq(i).show(); 
       $(this).hide(); 


      } 

      $("ul li:nth-child("+i+")").append("<span class='showless'> Show Less...</span>"); 


      $('.showless').click(function(event){  
      for(i = 3; i<a; i++) 
      { 
       $(this).hide(); 
       $("li").eq(i).hide(); 
       $('.readMore').show(); 


      } 
      }); 


     }); 
     }); 




    </script> 
    </head> 
    </html> 

    <body> 
    <!-- below part is generted from my php code --> 
    <ul class="bul5" style="font-size:13px;"> 
     <li>Samsung Galaxy Note 3 comes with <b>Android v4.3 Jelly Bean OS</b>.</li> 
     <li>It has a <b>1.9 GHz Octa Core Processor</b> and <b>3 GB RAM</b>.</li> 
     <li>Samsung Galaxy Note 3 has <b>5.7 Inches Screen</b> with <b>Full HD Display</b>.</li> 
     <li>It has a <b>13 MP Rear Camera</b> and <b>2 MP Front Camera</b>.</li> 
     <li>Samsung Galaxy Note 3 has <b>3G</b> Connectivity.</li><li>It has <b>FM Radio</b>.</li> 
     <li>The Phone is powered by <b>Li-ion 3200 mAh </b> standard battery with <b>Upto 21 hours</b> Talktime.</li> 
    </ul> 

    </body> 
</html>

這裏是提琴：http://jsfiddle.net/b9Qgj/1/

來源

2014-07-04 Raaga

請讓我知道，如果給定的演示工作不按你的預期 –

@YogeshSharma我的代碼按我的意料工作正常，但什麼我問是否有任何其他簡短的方法在jquery比我編碼。 – Raaga

所以我給出的代碼不能按照你的要求工作 –

您可以使用下面給出的JS參考

$('.media-item').hide(); 
    $('.media-item').slice(0, 3).show(); 
    $('.view-less-text').hide(); 
    var length=$('.media-item').length; 
    $("ul li:nth-child(3)").append("<span class='media view-all-text'> Read More...</span>"); 
    $('ul li:nth-child('+length+')').append("<span class='media view-less-text'> Read Less...</span>"); 
    $('.media').click(function() { 
     var $relatedItems = $('.media-item').slice(3); 
     if ($('.media-item').hasClass('show')) { 
      $relatedItems.hide().removeClass('show'); 
      $('.view-all-text').show(); 
      $('.view-less-text').hide(); 
     } 
     else { 
      $relatedItems.slideDown('slow').addClass('show'); 
      $('.view-all-text').hide(); 
      $('.view-less-text').show(); 
     } 
     return false; 
    });

立即檢查Demo

來源

2014-07-04 09:05:59

你可以給HTML部分如何工作 – Raaga

請檢查我創建的演示 –

你的代碼是工作的罰款。

有一個很小的問題。與此

$('this').hide();

：只需更換這一點 -

$(this).hide();

來源

2014-07-04 09:48:13 DWX

實現jquery閱讀更多＆顯示較少的動態li標籤

回答

相關問題