Question

我有一个由嵌套列表组成的菜单（下面的摘录），每个项链接到另一个页面，当用户将鼠标放在第一级列表项上时，变量将html存储在该项中，然后传递给另一个DIV。这是列表的编写方式：

 <ul id="siteMenu">
 <li><a href="shop-for-yarn">Colours</a>
<ul >
<li><a href="linktopage">Blacks/Greys</a></li>
<li><a href="linktopage">Blues</a></li>
<li><a href="linktopage">Greens</a></li>
<li><a href="linktopage">Mauve/Lilacs</a></li>
<li><a href="linktopage">Oranges</a></li>
<li><a href="linktopage">Yellows</a></li>
<li><a href="linktopage">Whites/Pastel</a></li>
</ul>
 </li>
 </ul>

一切似乎都在起作用，除了列表在附加到DIV时丢失了链接。

这是JQuery的一点......

$("ul#siteMenu li") .mouseover(function() {

    var list = $(this) .find("ul") .html();

$("#menuDisplay") .empty() .append("<ul>"+list+"</ul>");

});

如果有人能够知道为什么会这样，请告诉我，谢谢。

Answer 1

$("ul#siteMenu > li").mouseover(function() {
    var list = $(this).find("ul");
    $("#menuDisplay").empty().append(list);
});

Answer 2

尝试使用.clone将内容捕获到变量中，并使用append()将其应用于新的<div>

$(document).ready(function() {
    $("ul li").mouseover(function() {
        var list = $(this).find("ul").clone();
        $('#menuDisplay').empty().append(list);
    });
});

如何保存<a> items as a variable then append to a DIV as functional HTML</a>

2 个答案: