弹出式菜单是隐藏其父文本？

Question

我有一个弹出式菜单，显示/隐藏当div被悬停时。显示/隐藏菜单正常工作。然而，div中有文字“Square”，当我在代码中添加菜单时，它会消失。

的index.html

<div id= "squareDiv" style="width: 100px; height:100px; border:2px solid #a1a1a1;" > 
    Square 
</div> 

我的JS

//Add list items to the div 
$("#squareDiv").html(
    "<ul class='list_menu'><li><a href='firefox.com'>Maya Agriculture</a></li>"+ 
    "<li><a href='firefox.com'>Maya Agriculture Crossword</a></li>"+ 
    "<li><a href='firefox.com'>Inca Agriculture</a></li>"+ 
    "<li><a href='firefox.com'>Inca Agriculture Crossword</a></li>"+ 
    "</ul>" 
); 

$("#squareDiv").hover(function() { 
    $('ul.list_menu').slideDown('medium',function() { 
    $(this).clearQueue(); 
    }); 
}, function() { 
    $('ul.list_menu').slideUp('medium',function() { 
    $(this).clearQueue(); 
    }); 
}); 

Answer 1

使用append(...)代替html(...)，html()替换内容