javascript - zepto javascript 显示 x 元素

Question

使用 zepto.js，如何从 ul 中显示 X 项，隐藏其余项并仅在用户单击“显示更多”链接/按钮时显示它们？

10倍！

Answer 1

这是完成您所要求的一种方法。

$(function() {
  $('li').slice(5).toggle();

  $('span').click(function() {
    $('li').slice(5).toggle();
  });
});​

第一个.slice(5).toggle()函数获取所有选定的列表项，将它们缩小到从索引 5 开始到末尾的元素子集。然后它切换它在该子集中找到的第一个元素的可见状态。

然后我们将一个函数附加到click跨度上的事件，这是我们的显示/隐藏元素。该函数实际上与我们运行以隐藏索引 5 之后的所有元素的初始函数相同。

查看这个JS Fiddle以获得一个工作示例。此外，为了进一步参考，这里是文档.slice()，这里是文档.toggle()。

希望有帮助！

Answer 2

基本上有2种方式。

1. 使用 zepto 切换类并使用 css 定义要隐藏的内容

   /* show only the first 3 list items */
   ul.collapsed li:nth-child(n+4) {
       display: none;
   }
   

   var $list = $(ul.collapsed); // initially the list is collapsed
   
   // use a show-more link to toggle display of remaining items
   $("a.show-more").click(function(){
   
       // get the current state of the list by querying the className
       var shouldShow = $list.hasClass("collapsed") == true;
       $list.toggleClass("collapsed");
   
       // set the link text according to the task (show or hide)
       $(this).html(shouldShow ? "Show less" : "Show more");
   
       // its a link, don't follow it
       return false;
   });
   

2. 使用 zepto “独立”

   var $list = $(ul);
   
   // use the link to set the css properties directly
   $("a.show-more").click(function(){
   
       var shouldShow = $list.hasClass("collapsed") == true;
   
       $("li:nth-child(n+4)", $list).css({
           "display": shouldShow : "" : "none"
       });
   
       $(this).html(shouldShow ? "Show less" : "Show more");
       return false;
   });