jquery에서 메뉴의 목록 항목 숨기기 및 표시?

Question

나는 li에있는 모든 항목을 가지고있는 메뉴를 가지고 있습니다. 내가하고 싶은 일은 li가 5 이상인 경우입니다. "더보기"옵션을 표시하고 나머지 li을 숨기고 "더보기"를 클릭하여 표시하고 다른 "더보기"가 표시되면이를 역으로 숨길 수 있습니다. li이 이것은 내가 뭘하려고 오전의 jsfiddle입니다

<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> 

내 HTML입니다

를 클릭 :

JsFiddle

이 때 01,234,269,841,216,841,s는 5보다 많지 않습니다. "더보기"옵션은 없어야하며, "더보기"옵션은 클릭 수보다 적게 클릭해야합니다. 다른 "보기 더보기"로 이동하면 숨길 수 있습니다. 열려있는 것을 닫아야한다는 것을 클릭하십시오. 당신의 jsfiddle을 바탕으로

Answer 1

, 나는 다음과 같은 한 :

$('.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(); 
}); 

EDIT 주 : 상기 작동하지만 순서에 민감하다. 당신이 최근에 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(); 
}); 

당신은 u는 jsfiddle을 시작