怎么用jquery写级联菜单1

发布网友发布时间：2023-10-30 11:27

共1个回答

热心网友时间：2024-12-13 09:02

帮你的写了个，看看是这是你想要的。（直接复制保存为htm文件即可运行）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pop menu</title>
<script src=""></script>
<style>
li
#menu
#sub_menu
</style>
</head>

<body>
<input type="button" value="show Menu" onclick="getMenu();" style="cursor:default; ">
</body>
<script>
//
var countries = new Array('中国(China)', '美国(USA)');
var citys = new Array(['广州', '深圳', '重庆', '北京', '天津', '上海', '青岛'], ['Washington D.C', 'Seattle', 'Chicago', 'San Francisco']);

function getMenu(){
var main_menu = "<ol style='list-style:none;' id='main_menu'>";

for(var i = 0; i < countries.length; i++){
main_menu += "<li id='l_" + i + "'>" + countries[i] + "<li>";
}

main_menu += "</ol>";
$("body").append('<div id="menu">' + main_menu + '</div>');
$("#menu").slideDown("slow");

$("#main_menu > li").bind("mouseover", function(){
$("#sub_menu").remove();
$(this).css("background","#CCC");
var sub_menu = "<ol style='list-style:none;'>";

var index = $(this).attr("id").substr($(this).attr("id").indexOf("_") + 1);

for(var i = 0; i < citys[index].length; i++){
sub_menu += "<li>" + citys[index][i] + "</li>";
}
sub_menu += "</ol>";

$("body").append("<div id='sub_menu'>" + sub_menu + "</div>");

var offset = $(this).offset();
$("#sub_menu").css().slideDown("slow");

$("#sub_menu > ol> li").bind("click", function(){
alert($(this).text());
$("#sub_menu").remove();
}).bind("mouseover", function(){
$(this).css("background","#CCC");
}).bind("mouseout", function(){
$(this).css("background","#EBEBEB");
});

}).bind("mouseout", function(){
$(this).css("background","#EBEBEB");
});
}
</script>
</html>追问怎么不行啊