如何截斷無序列表並允許用戶單擊以顯示全部？

我有一個很長的無序列表，我想隱藏除加載前的第一個3以外的所有列表，然後在單擊時展開到所有列表。如何截斷無序列表並允許用戶單擊以顯示全部？

這裏是我的jQuery至今：

$('#myList').find('li:gt(3)').addClass('togglr').hide().end().append(
    $('<li class="show_more_btn">Read more »</li>').click(function(){ 
     $(this).siblings('.togglr').toggle(); 
     if ($(this).hasClass('expanded')){ 
      $(this).text('View All'); 
      $(this).removeClass('expanded'); 
     } else{ 
      $(this).text('View Less'); 
      $(this).addClass('expanded'); 
     } 
    });

而且我的html：

<ul id="myList"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
    <li>Item 6</li> 
    <li>Item 7</li> 
    <li>Item 8</li> 
</ul>

這裏有一個的jsfiddle：http://jsfiddle.net/t2jrZ/

我要去哪裏錯了？

來源

2013-02-27 Ryan

該pro blem是額外的'}）;'你在最後加上了 - http://jsfiddle.net/hykaJ/ :) – 2013-02-27 03:05:03

同意上面的評論。應該已發佈爲答案。你是鏈接方法，你不需要右括號。 – 2013-02-27 03:09:06

你快到了！也許只是想得太多了，在當前的腳本結束）

的概率與您當前的代碼是最後});，與}));

HTML

<ul id="info"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
    <li>Item 6</li> 
    <li>Item 7</li> 
    <li>Item 8</li> 
</ul> 
<button type="button" onclick="showAll();">Show All</button>

的Javascript取代：

var limit = 3; 
$('#info li:lt(' + limit + ')').show(); 
$('button').click(function(){ 
    $('#info li').show(); 
});

http://jsfiddle.net/t2jrZ/2/

來源

2013-02-27 03:03:47

如何截斷無序列表並允許用戶單擊以顯示全部？

回答

相關問題