Question

在我的代码 li 标记是使用php生成的。它是动态的，有时可能有超过3个 li 标签，有时少于3个 li 标签。在这种情况下，我必须显示更多＆＃39;并且＆＃39;显示更少＆＃39;当 li 标记超过3时。

这里我展示了我的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/

Answer 1

您可以使用以下给定的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

Answer 2

您的代码运行正常。

有一个非常小的问题。只需替换它：

$('this').hide();

用这个： -

$(this).hide();

Answer 3

    jQuery(document).ready(function($){ var a = $(".bul5 li").length;

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

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

     }
     $('.bul5 .readMore').click(function(event){   

        $('.bul5 .readMore').hide();

        for( i = 3; i<a; i++ )
        {

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


        }

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


        $('.bul5 .showless').click(function(event){   

          $('.bul5 .showless').hide();

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


         }
        });


     });
   });

这是正确阅读且没有内容的js

实现jquery阅读更多＆amp;动态li标签显示较少

3 个答案: