如何在<；的X编号后添加子菜单；李>；使用Javascript还是Jquery？

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

我想做的是在第二个

之后添加一个

最终预期产出应为：

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

limenu=document.selectAll（.ktmsg）（“
”）；
对于（var i=1，i使用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);
    });
})

jQuery（函数（$）{
var$lis=$（'.ktmsg>ul>li'）；
var$a=$（'
'）。insertAfter（$lis.eq（1））；
var$lefts=$lis.slice（2.hide（）；
$a.hover（函数（）{
clearTimeout（$a.data（'hoverTimer'））；
$lefts.show（）；
}，函数（）{
var timer=setTimeout（函数（）{
$lefts.hide（）；
}, 200);
$a.data（'hoverTimer'，timer）；
});
$lefts.hover（函数（）{
clearTimeout（$a.data（'hoverTimer'））；
}，函数（）{
var timer=setTimeout（函数（）{
$lefts.hide（）；
}, 200);
$a.data（'hoverTimer'，timer）；
});
})

演示：
使用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);
    });
})

jQuery（函数（$）{
var$lis=$（'.ktmsg>ul>li'）；
var$a=$（'
'）。insertAfter（$lis.eq（1））；
var$lefts=$lis.slice（2.hide（）；
$a.hover（函数（）{
clearTimeout（$a.data（'hoverTimer'））；
$lefts.show（）；
}，函数（）{
var timer=setTimeout（函数（）{
$lefts.hide（）；
}, 200);
$a.data（'hoverTimer'，timer）；
});
$lefts.hover（函数（）{
clearTimeout（$a.data（'hoverTimer'））；
}，函数（）{
var timer=setTimeout（函数（）{
$lefts.hide（）；
}, 200);
$a.data（'hoverTimer'，timer）；
});
})

演示：
我使用jQuery创建了一个。非常简单，你只需使用CSS隐藏子菜单，然后在鼠标悬停“更多”时使用jQuery根据需要显示/隐藏它。我使用了
fadeIn（）
和
fadeOut（）
但你也可以同样轻松地使用
hide（）
和
show（）
如果你不需要动画。我已经稍微重新构造了你的HTML，因此如果你使用我的解决方案，请使用我的新HTML。
我已经使用jQuery创建了一个。非常简单，你只需使用CSS隐藏子菜单，然后在“更多”悬停时使用jQuery显示/隐藏它。我使用了
fadeIn（）
和
fadeOut（）
，但如果不需要动画，您可以同样轻松地使用
hide（）
和
show（）
。我已稍微重新构造了HTML，因此如果您使用我的解决方案，请使用我的新HTML。
使用jQuery添加以下内容：

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



在第二个li之后，您需要：

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

$（'li:eq（1）'）。之后（'ul>'）；
使用jQuery添加以下内容：

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



在第二个li之后，您需要：

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

$（'li:eq（1）'）。之后（'ul>'）；
一旦你将其悬停，如果你离开，它是否必须隐藏it@ArunPJohny如果你移出它是的，它应该像一个普通的子菜单一样再次隐藏。我在考虑删除和添加像remove.limenu和document.create之类的东西。我在想你的javascript不应该看起来像那样，因为它看起来不像就像有效的javascript一样。我还认为您的预期结果是无效的标记，LI在锚中，等等？一旦您悬停它，如果您移出锚，是否必须隐藏它it@ArunPJohny如果你移出它是的，它应该像一个普通的子菜单一样再次隐藏。我正在考虑删除和添加，比如remove.limenu和documnt.create或类似的东西。我认为你的javascript不应该看起来像那样，因为它根本不像有效的javascript。我还认为你的预期结果是无效的标记，锚中有LI等？正是我想要的。谢谢。正是我想要的。谢谢。