javascript - 如何使用 Javascript 或 Jquery 在 X 数量的 之后添加子菜单？

Question

我有 HTML

<div class="ktmsg">
  <ul>
    <li class="a1">
        <a title="Link Tools" href="#"> … </a>
    </li>
    <li class="a2">
        <a title="Link Tools" href="#"> … </a>
    </li>
    <li class="a3">
        <a title="Link Tools" href="#"> … </a>
    </li>
  </ul>
</div>

我想做的是在第二个</li>之后添加一个<ul><a href="#">More</a></ul>最终的预期输出应该是

<div class="ktmsg">
  <ul>
    <li class="a1">
        <a title="Link Tools" href="#"> … </a>
    </li>
    <li class="a2">
        <a title="Link Tools" href="#"> … </a>
    </li>
    <ul> //Starting the sub-menu
    <a href="#">More</a> // The link that after i hover it will start showing the <li> starting from the third one
      <li class="a3">
        <a title="Link Tools" href="#"> … </a>
      </li>
    </ul>
  </ul>
</div>

我认为 javascript 看起来像这样:

limenu = document.selectAll(.ktmsg)('<li>');
for(var i=1, i<2, i++)
  remove.limenu
  add.

....我很困惑，请帮忙，我们将不胜感激。

Answer 1

使用jQuery

jQuery(function ($) {
    var $lis = $('.ktmsg > ul > li');
    var $a = $('<li><a href="#">More</a></li>').insertAfter($lis.eq(1));
    var $lefts = $lis.slice(2).hide();

    $a.hover(function () {
        clearTimeout($a.data('hoverTimer'));
        $lefts.show();
    }, function () {
        var timer = setTimeout(function () {
            $lefts.hide();
        }, 200);
        $a.data('hoverTimer', timer);
    });

    $lefts.hover(function () {
        clearTimeout($a.data('hoverTimer'));
    }, function () {
        var timer = setTimeout(function () {
            $lefts.hide();
        }, 200);
        $a.data('hoverTimer', timer);
    });
})

演示:Fiddle