在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(); 
});