javascript - zepto javascript は x 要素を表示します

Question

zepto.js を使用して、ul から X 個のアイテムを表示し、残りを非表示にして、ユーザーが「もっと見る」リンク/ボタンをクリックしたときにのみ表示するにはどうすればよいですか?

10倍！

Answer 1

これが、あなたが求めていることを達成する1つの方法です。

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

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

最初の.slice(5).toggle()関数は、選択されたすべてのリスト項目を取得し、インデックス 5 から最後までの要素のサブセットに絞り込みます。次に、そのサブセットで最初に見つかった要素の表示状態を切り替えます。

click次に、Show/Hide 要素であるスパンのイベントに関数をアタッチします。この関数は実際には、インデックス 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;
   });