jQuery追加多餘的菜單項到一個div

Question

我在我的管理區域有一個horiztonal菜單。當有超過8個項目時，我想添加一個「更多」項目，點擊該項目時，滑出一個div，其中顯示多餘的菜單項。

在一分鐘，我只是試圖將額外的菜單項追加到div。我已經添加了div到我的adin區域，它的ID爲more_menu。這裏是jQuery的我到目前爲止，但目前它不工作：

$('ul#adminmenu:has(li.menu-top:gt(8))').each(function() { 
      $(this).append('<li id="more" class="menu-top menu-top-first menu-top-last"><a class="open_more_menu" href="#"><div class="wp-menu-name">More</div></a></li>'); 
      var lis = $(this).find('li.menu-top:gt(8)').not('#more'); 
      $(this).find('#more_menu ul').append(lis); 
    }); 

這成功添加更多項目的菜單，但忽略了多少菜單項已經有。此外，它不會將額外的菜單項追加到#more_menu div

Answer 1

這樣的事情呢？

HTML

<ol id="menu"> 
    <li>Lorem ipsum.</li> 
    <li>At, consequatur.</li> 
    <li>Ut, ipsam.</li> 
    <li>Ullam, nulla.</li> 
    <li>Similique, dolore!</li> 
    <li>Dolores, quibusdam.</li> 
    <li>Ea, impedit!</li> 
    <li>Quibusdam, delectus.</li> 
    <li>Consequatur, tempore?</li> 
    <li>Lorem ipsum.</li> 
    <li>At, consequatur.</li> 
    <li>Ut, ipsam.</li> 
    <li>Ullam, nulla.</li> 
    <li>Similique, dolore!</li> 
    <li>Dolores, quibusdam.</li> 
    <li>Ea, impedit!</li> 
    <li>Quibusdam, delectus.</li> 
    <li>A Consequatur, tempore?</li> 
</ol> 
<ul id="more_menu"> 

</ul> 

CSS

#more_menu { 
    display: none; 
} 

JS

$(document).ready(function(){ 
    var count = $('#menu').children().length; 
    var limit = 8; 
    if (count > 8) { 
    for (var i = 1; i <= count - limit; i++) { 
     $('#more_menu').append($('#menu').children().eq(limit)); 
    } 
    $('#menu').append('<li><a href="" class="more">Show more</a></li>'); 
    } 

    $('#menu').on('click', '.more', function(e){ 
    e.preventDefault(); 
    $('#more_menu').toggle(); 
    }); 

}); 

https://jsfiddle.net/oa4zLrvp/2/

您可以切換出切換爲#more_menu爲D A toggleClass efines你用來滑出菜單的css動畫