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/

您可以为toggleClass切换#more_menu的切换，以定义您用来滑出菜单的css动画

jQuery将多余的菜单项附加到div

1 个答案: