.pad {position:absolutedisplay:nonez-index:100}
</style>
<table>
<tr>
<td onmouseover="ShowPopMenu(''pad1'')">pad1</td>
<td onmouseover="ShowPopMenu(''pad2'')">pad2</td>
<td onmouseover="ShowPopMenu(''pad3'')">pad2</td>
<td onmouseover="ShowPopMenu(''pad4'')">pad2</td>
<td onmouseover="ShowPopMenu(''pad5'')">pad2</td>
</tr>
</table>
<span id="pad1" class="pad">
<iframe src=w2.htm width=100 height=100 frameborder=no style="position:relative"></iframe>
</span>
<span id="pad2" class="pad">
<iframe src=w2.htm width=100 height=100 frameborder=no style="position:relative"></iframe>
</span>
<span id="pad3" class="pad">
<iframe src=w2.htm width=100 height=100 frameborder=no style="position:relative"></iframe>
</span>
<span id="pad4" class="pad">
<iframe src=w2.htm width=100 height=100 frameborder=no style="position:relative"></iframe>
</span>
<span id="pad5" class="pad">
<iframe src=about:blank name=popmenu2 width=100 height=100 frameborder=no style="position:relative"></iframe>
</span>
<div style="z-index:0">
<select>
<option>aaa
<option>bbb
<option>ccc
</select>
<br/>
<iframe src=></iframe>
<span id="view" style="position:absolutez-index:0"></span>
</div>
<script>
//function test(v) {
//v.innerHTML = "ssss<br/><iframe src=w2.htm width=200 height=100 style=\"position:relative\"></iframe>"
//}
popmenu2.document.write("aaaaaaa<br/>ssssssssss<br/>ccccccccc<br/>tttttttt")
function CloseAllPopMenu() {
var i = 1
while(document.all["pad"+i]) {
document.all["pad"+i].style.display = "none"
i++
}
}
function ShowPopMenu(v) {
var el = event.srcElement
v = document.all[v]
CloseAllPopMenu()
v.style.left = el.offsetLeft
v.style.display = "block"
}
</script>
是不是这样？
关键在于而当上级菜单的超链接被鼠标放上时 即 a:hover，
下级菜单 display:block
比如下级菜单 的class 是 submenu, 上级菜单 menu
.submenu { display:none} 平时隐藏
.menu a:hover .submenu {display:block}
要保证 每个.submenu是a 的子元素
给你一个JQ的三级联动：<!doctype html>
<html>
<head>
<title></title>
<meta charset = "utf-8"/>
</head>
<style>
</style>
<body>
<select id="one">
<option value="">请选择省份</option>
</select>
<select id="two">
<option value="">请选择城市</option>
</select>
<select id="three">
<option value="">请选择区域</option>
</select>
<script type="text/javascript" src="js/jquery-1.12.0.js"></script>
<script type="text/javascript">
/*
1.搭建框架
2.给省份和城市绑定change事件
*/
$(function(){
var province = [
{"name" : "广东省" ,
"city" : [
{
"name" : "广州市" ,
"area" : ["越秀区","荔湾区","海珠区","天河区,白云区"]
},
{
"name" : "深圳市" ,
"area" : ["福田区","罗湖区","南山区","宝安区","龙岗区"]
}
]
},
{"name" : "浙江省" ,
"city" : [
{
"name" : "杭州市" ,
"area" : ["上城区","下城区","江干区","西湖区"]
},
{
"name" : "丽水" ,
"area" : ["莲都区","松阳县","遂昌县","云和县"]
}
]
},
{"name" : "江西省" ,
"city" : [
{
"name" : "南昌市" ,
"area" : ["东湖区","西湖区","青云谱区","湾里区"]
},
{
"name" : "九江市" ,
"area" : ["浔阳区","庐山区","瑞昌市","九江县"]
},
{
"name" : "赣州市" ,
"area" : ["章贡区","南康区","上犹县","赣县"]
}
]
},
]
// 二级联动
$("#two").change(function(){
var one_index = $("#one option:selected").index()
var two_index = $("#two option:selected").index()
var three = $("#three")
three.empty().append("<option>请选择区域</option>")
if(two_index > 0){
var area = province[one_index-1].city[two_index-1].area
for(var i = 0 i < area.length i++){
three.append("<option>"+area[i]+"</option>")
}
}
})
// 一级联动
$("#one").change(function(){
var one_index = $("#one option:selected").index()
var two = $("#two")
console.log(one_index)
two.empty().append("<option>请选择城市</option>")
$("#three").empty().append("<option>请选择区域</option>")//清除
if(one_index > 0){
var city = province[one_index-1].city
console.log(province[one_index-1].city)
for(var i = 0 i < city.length i++){
two.append("<option>"+city[i].name+"</option>")
}
}
})
init()
function init(){
for(var i = 0 i < province.length i++){
$("#one").append("<option>"+province[i].name+"</option>")
}
}
})
</script>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）