jQuery余分なメニュー項目を部門に追加

Question

私は管理領域に水平メニューを持っています。 8つ以上の項目がある場合は、「More」項目を追加します。クリックすると、表示されている余分なメニュー項目を含むdivがスライドされます。

分で、余分なメニュー項目をdivに追加しようとしています。私は私のadinエリアにdivを追加しました。それは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/

あなたは、D toggleClassため#more_menuのためのトグルを切り替えることができますメニューをスライドさせるために使用しているCSSアニメーションを作成する