显示所有列表项-使用jQuery

我正在编写一段简单的代码来隐藏然后显示列表项

目前，我已经让它工作了，所以每次单击“加载更多”时，它都会显示更多内容。它分5批加载，但是，当我单击“加载更多”时，我想显示无序列表中的所有列表项

如何使用当前代码实现这一点

演示：

$（文档）.ready（函数（）{
size#li=$（“#myList li”）.size（）；
x=3；
$（'#myList li:lt（'+x+'））.show（）；
$（“#加载更多”）。单击（函数（）{
x=（x+5使用这个

   size_li = $("#myList li").size();
  x = 3;
  $('#myList li:lt(' + x + ')').show();
  $('#loadMore').click(function() {
    $('#myList li,#showLess').show();
    $('#loadMore').hide();
  });
  $('#showLess').click(function() {
    $('#myList li:gt(' + x + '),#showLess').hide();
    $('#loadMore').show();
  });

使用这个

   size_li = $("#myList li").size();
  x = 3;
  $('#myList li:lt(' + x + ')').show();
  $('#loadMore').click(function() {
    $('#myList li,#showLess').show();
    $('#loadMore').hide();
  });
  $('#showLess').click(function() {
    $('#myList li:gt(' + x + '),#showLess').hide();
    $('#loadMore').show();
  });

更新的代码

您可以使用和定义显示和隐藏的li限制


$（文档）.ready（函数（）{
size#li=$（“#myList li”）.size（）；
x=3；
$（'#myList li:lt（'+x+'））.show（）；
$（“#加载更多”）。单击（函数（）{
$（“#加载更多”）.hide（）；
$（'#showLess'）.show（）；
$（'#myList li:gt（3）'）.show（）；
});
$（“#无显示”）。单击（函数（）{
$（'#loadMore'）.show（）；
$（'#showLess'）.hide（）；
$（“#myList li:gt（3）”.hide（）；
});
})；
#myList li{显示：无；
}
#荷德莫尔{
颜色：绿色；
光标：指针；
}
#加载更多：悬停{
颜色：黑色；
}
#炫耀的{
颜色：红色；
光标：指针；
显示：无；
}
#悬停{
颜色：黑色；
}


一个
两个
三
四
五
六
七
八
九
十
十一
十二
十三
十四
十五
十六
十七
十八
十九
二十一
二十二
二十三
二十四
二十五

加载更多
显示较少的更新代码

您可以使用和定义显示和隐藏的li限制


$（文档）.ready（函数（）{
size#li=$（“#myList li”）.size（）；
x=3；
$（'#myList li:lt（'+x+'））.show（）；
$（“#加载更多”）。单击（函数（）{
$（“#加载更多”）.hide（）；
$（'#showLess'）.show（）；
$（'#myList li:gt（3）'）.show（）；
});
$（“#无显示”）。单击（函数（）{
$（'#loadMore'）.show（）；
$（'#showLess'）.hide（）；
$（“#myList li:gt（3）”.hide（）；
});
})；
#myList li{显示：无；
}
#荷德莫尔{
颜色：绿色；
光标：指针；
}
#加载更多：悬停{
颜色：黑色；
}
#炫耀的{
颜色：红色；
光标：指针；
显示：无；
}
#悬停{
颜色：黑色；
}


一个
两个
三
四
五
六
七
八
九
十
十一
十二
十三
十四
十五
十六
十七
十八
十九
二十一
二十二
二十三
二十四
二十五

加载更多
显示较少
@michaelmcgurk yesUpdated:轻微调整。当我单击
加载较多
然后单击
显示较少
时，它不会显示结果：-（非常好的工作，@madalin！谢谢。很快接受回答：-）@michaelmcgurk yesUpdated:轻微调整。请参阅当我单击
加载较多
然后
显示较少
时，它不会显示任何结果：-（棒极了，@madalin！谢谢。很快就可以接受答案：-）点击显示所有项目就足够了吗？$（“#myList li”）.show（）；@Gerfried这是一个很好的观点。我会很快尝试。点击显示所有项目就足够了吗？$（“#myList li”）.show（）；@Gerfried这是一个很好的观点。我会很快尝试。