怎么用jquery写级联菜单

 我来答

1个回答

#热议# 应届生在签三方时要注意什么？

仲孙洁玉
2011-05-04 · TA获得超过371个赞

知道答主

回答量：283

采纳率：0%

帮助的人：178万

我也去答题访问个人页

关注

展开全部

帮你的写了个，看看是这是你想要的。（直接复制保存为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>

追问

怎么不行啊

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

怎么用jquery写级联菜单

其他类似问题

为你推荐：