在jquery的菜單中隱藏和顯示列表項？

Question

我有一個菜單，我有li s中的所有項目。我想要做的是每當li s超過5時，我想顯示「查看更多」選項並隱藏剩餘的li s並單擊「查看更多」時顯示它們，並在另一個「查看更多」時隱藏它們li點擊

這是我的HTML

<ul class="nav"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Categorys</a> 
     <div> 
      <ul> <a href=""> title="This is an example of a caption"></a></ul> 
      <ul> 
       <h3>Title1</h3> 
       <li data-bind="100002"><a href="#">1</a></li> 
       <li data-bind="100028"><a href="#">2</a></li> 
      </ul> 
      <ul> 
       <h3>Title2</h3> 
       <li data-bind="100000"><a href="#">1</a></li> 
       <li data-bind="100004"><a href="#">2</a></li> 
       <li data-bind="100007"><a href="#">3</a></li> 
       <li data-bind="100009"><a href="#">4</a></li> 
       <li data-bind="100010"><a href="#">5</a></li>//hide from here and show view more option and show them on click 
       <li data-bind="100011"><a href="#">6</a></li> 
       <li data-bind="100051"><a href="#">7</a></li> 
      </ul> 
      <ul> 
       <h3>Title3</h3> 
       <li data-bind="100103"><a href="#">1</a></li> 
       <li data-bind="100105"><a href="#">2</a></li> 
       <li data-bind="100115"><a href="#">3</a></li> 
       <li data-bind="200071"><a href="#">4</a></li> 
       <li data-bind="200072"><a href="#">5</a></li>//hide from here and show view more option and show them on click 
       <li data-bind="200073"><a href="#">6</a></li> 
       <li data-bind="200043"><a href="#">7</a></li> 
       <li data-bind="200044"><a href="#">8</a></li> 
       <li data-bind="200045"><a href="#">9</a></li> 
       <li data-bind="200046"><a href="#">10</a></li> 
       <li data-bind="200047"><a href="#">11</a></li> 
       <li data-bind="200048"><a href="#">12</a></li> 
      </ul> 
     </div> 
    </li> 
</ul> 

這是什麼，我試圖做一個的jsfiddle：

JsFiddle

當li s不超過5，「查看更多」選項不應該在那裏，「查看更多」選項應該更換，並點擊那些應該隱藏的點擊是，如果我去其他「查看更多」和點擊打開的應該關閉。

Answer 1

根據您的jsfiddle，我做了以下內容：

$('.nav li > div > ul') 
    .find('li:gt(4)') //you want :gt(4) since index starts at 0 and H3 is not in LI 
    .hide() 
    .end() 
    .each(function(){ 
     if($(this).children('li').length > 5){ //iterates over each UL and if they have 5+ LIs then adds Show More... 
      $(this).append(
       $('<li>Show More...</li>') 
       .addClass('showMore') 
       .click(function(){ 
        $(this).hide().siblings(':hidden').show(); 
        $('.showMore').not(this).show().siblings('li:gt(4)').hide(); 
       }) 
     ); 
    } 
    }); 

DEMO： http://jsfiddle.net/dirtyd77/qN59g/4/

希望這有助於！

UPDATE

$('.nav li > div > ul') 
    .find('li:gt(4)') //you want :gt(4) since index starts at 0 and H3 is not in LI 
    .hide() 
    .end() 
    .each(function(){ 
     if($(this).children('li').length > 5){ //iterates over each UL and if they have 5+ LIs then adds Show More... 
      $(this).append(
       $('<li>Show More...</li>') 
       .addClass('showMore') 
       .click(function(){ 
        if($(this).siblings(':hidden').length > 0){ 
         $(this).html('Show Less...').siblings(':hidden').show(); 
        }else{ 
         $(this).html('Show More...').show().siblings('li:gt(4)').hide(); 
        } 
       }) 
     ); 
    } 
    }); 

DEMO： http://jsfiddle.net/dirtyd77/qN59g/6/

Answer 2

var viewMore = $('<li class="viewmore">Show More...</li>'); 
var nav = $('ul.nav>li>div>ul'); 
// only append to those needed 
nav.find('>li:gt(4)').hide().parent().append(viewMore); 
nav.find('.viewmore').click(function() { 
    //hide all outside the limit 
    nav.find('>li:gt(4)').hide(); 
    //show the viewmore - all or them 
    nav.find('.viewmore').show(); 
    // now hide the viewmore and show its siblings 
    $(this).hide().siblings().show(); 
}); 

編輯注：上述作品，但它是順序敏感。如果您可以使用較新的jQuery的，使用.on()像這樣：

var viewMore = $('<li class="viewmore">Show More...</li>'); 
var nav = $('ul.nav>li>div>ul'); 
nav.find('>li:gt(4)').hide().parent().append(viewMore); 
nav.on('click','.viewmore',function() { 
    nav.find('>li:gt(4)').hide(); 
    nav.find('.viewmore').show(); 
    $(this).hide().siblings().show(); 
});