菜单不能实现冒泡事
<!DOCTYPE html><html xmlns="http://www.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.ulCss
{
padding: 0;
margin: 0;
position:absolute;
}
.liCss
{
background-color: #333333;
list-style-type: none;
float: left;
border-right: 1px red;
border-right-style: solid;
position: inherit;
color: #ffffff;
/*position:relative;*/
margin-right: 5px;
}
.tableCss
{
background-color: #ffffff;
/*display:none;*/
}
.tdCss
{
font-size: 13px;
text-align: center;
}
#content
{
color: red;
display: none;
position: inherit;
margin: 0;
padding: 0;
border-bottom: 1px solid #339900;
border-left: 1px solid #339900;
border-right: 1px solid #339900;
}
.onli
{
color: #357d13;
background-color: #ffffff;
}
#ulcontent
{
background-color: #333333;
width: 900px;
margin: 0 auto;
}
</style>
<script src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function () {
var arraytd = new Array();
//alert(array.length);
var tdString = new Array();
var liArray = ["商城", "古迹", "中国"];
var liStr = "";
for (var i = 0; i < liArray.length; i++) {
liStr += "<li><a href='#'>" + liArray[i] + "</a></li>";
}
var ulStr = "<div id='ulcontent'style='position:absolute'><ul id='uid'>" + liStr + "</ul></div>";
$("body").append(ulStr);
$("#uid li").addClass("liCss");
var tdItemStr_1 = ["one", "two", "three"];//创建第一个td字符串
var tdItemStr_2 = ["北京", "天津", "湖北"];
var tdItemStr_3 = ["长城", "天桥", "安化"];
var tdItemStr_4 = ["长条砖", "石狮子", "杨树"];
tdString[0] = tdItemStr_1;
tdString[1] = tdItemStr_2;
tdString[2] = tdItemStr_3;
tdString[3] = tdItemStr_4;
for (var i = 0; i < tdString.length; i++)//创建td对象的字符串
{
arraytd[i] = new Array();
var tdStr = "";
var tempStr = "";
for (var h = 0; h < tdString[i].length; h++) {
tempStr = "<td>" + tdString[i][h] + "</td>";
tdStr = tdStr + tempStr;
}
arraytd[i][0] = tdStr;
//alert(tdStr);
}
var trStr = "";
for (var i = 0; i < arraytd.length; i++) {
trStr += "<tr>" + arraytd[i][0] + "</tr>";
}
var tableStr = "<div id='content'><table id='tb'><tbody>" + trStr + "</tbody></table></div>";
$(tableStr).appendTo("#ulcontent");
$("#tb").addClass("tableCss");
var w = $(document).width();
var w1 = $("#ulcontent").width();
$("#ulcontent").css({"left":((w-w1)/2)+"px"});
$("#uid li").each(function () {
$("a", this).mouseover(function () {
var liY = $(this).offset().top;
var liX = $(this).offset().left;
var wucha = $("body").offset().left;
var newY = liY + $(this).height();
$(this).addClass("onli");
$("#content").css({
"top": (newY - 8 ) + "px",
"left": (liX - ((w - w1) / 2)) + "px"
}).show("fast");
}).mouseout(function () {
$("#content").hide();
$(this).removeClass("onli");
});
});
});
</script>
</head>
<body>
</body>
</html>
代码有点多，可读性不好，希望高手们能够看下去，看看我的问题所在，我希望的效果是，鼠标能移动到下拉菜单上去，现在却移动不上去
[ 本帖最后由 lxb932979339 于 2013-5-23 17:12 编辑 ]
