实现jqueryreadmore&；动态li标记的显示较少
在我的代码中，li标记是使用php生成的。它是动态的，有时可能超过3个li标记，有时少于3个li标记。在这种情况下，当li标记大于3时，我必须显示“读取更多”和“显示更少” 在这里，我展示了我的html和jquery，以及我所做的尝试。有没有其他简单的方法来实现这一点实现jqueryreadmore&；动态li标记的显示较少,jquery,html,Jquery,Html,在我的代码中，li标记是使用php生成的。它是动态的，有时可能超过3个li标记，有时少于3个li标记。在这种情况下，当li标记大于3时，我必须显示“读取更多”和“显示更少” 在这里，我展示了我的html和jquery，以及我所做的尝试。有没有其他简单的方法来实现这一点 <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.m
<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>
$（文档）.ready（函数（）{
变量a=$（“.bul5 li”）.长度；
如果（a>3）
{
$（“ul li:nth child（3）”）。追加（“阅读更多…”）；
}
对于（i=3；i），您可以使用下面给定的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;
});
$（'.media item'）.hide（）；
$（'.media项'）.slice（0,3.show（）；
$（'.view less text'）.hide（）；
变量长度=$（'.media项'）。长度；
$（“ul li:nth child（3）”）。追加（“阅读更多…”）；
$（'ul li:n个子（'+length+'））.append（“少读…”）；
$（'.media'）。单击（函数（）{
var$relatedItems=$（'.media item'）.slice（3）；
if（$（'.media项'）.hasClass（'show'））{
$relatedItems.hide（）.removeClass（'show'）；
$（'.view all text'）.show（）；
$（'.view less text'）.hide（）；
}
否则{
$relatedItems.slideDown（'slow'）.addClass（'show'）；
$（'.view all text'）.hide（）；
$（'.view less text'）.show（）；
}
返回false；
});
现在检查您的代码工作正常
有一个很小的问题。
只要替换这个：
$('this').hide();
为此：-
$(this).hide();
jQuery（document）.ready（函数（$）{var a=$（“.bul5 li”）.length；
如果（a>3）
{
$（“.bul5 li:nth child（3）”）.append（“阅读更多…”）；
}
对于（i=3；i请检查我创建的演示。如果给定的演示不符合您的要求，请告诉我expected@YogeshSharma我的代码按照我的期望工作得很好，但我要问的是，除了我编写的代码之外，jquery中还有其他短方法吗requirements@YogeshSharma在第三个李标签中，我应该在这一点的最后，我应该得到“少看”@Yogesharma。看看你的演示。多读和少读必须与li中的段落一起出现。它不应该出现在下一行
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();
}
});
});
});