如何在X数后添加子菜单 <li> 使用Javascript或Jquery？

Question

I have in 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>

What i want to do is to add after the second </li> an <ul><a href="#">More</a></ul> Final expected output should be

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

I am thinking that the javascript would look smth like this:

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

.... And i am quite stuck, Please help, would be much appreciated.

Answer 1

Using 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);
    });
})

Demo: Fiddle

Answer 2

With jQuery to add this:

<ul><a href="#">More</a></ul>

after second li you need:

$( 'li:eq(1)' ).after( '<ul><a href="#">More</a></ul>' );

Answer 3

I've created a fiddle of how this could work using jQuery. Pretty simple really, you just hide the sub menu using CSS and then show/hide it as needed using jQuery when "More" is being hovered over. I've used fadeIn() and fadeOut() but you could just as easily use hide() and show() if you don't need the animations. I've restructured your HTML slightly so if you use my solution use my new HTML.