日期:2014-05-16  浏览次数:20412 次

这个程序大家来看看
<html>

<head>
<script>
function pop(id)
{
var menu = document.getElementById(id);

if(menu.style.display=="none")
menu.style.display="block";
else
menu.style.display="none";

var html = "";
var id2 = "";
for(var j = 1; j <= 2; j++)
{
id2 = id + j;
html = html + "<li onClick=pop('" + id2 + "')>123</li><ul id='" + id2 + "' style='display:none'></ul>";
}
menu.innerHTML = html;
//document.write(id2);
}
</script>
</head>

<body>
<ul>

<%
String id = "here";
String idname = "";
for(int i = 1; i <= 3; i++)
{
idname = id + i;
%>
<li onClick="pop('<%=idname%>')"><%=i%></li>
<ul id="<%=idname%>" style="display:none">
</ul>
<%}%>

</ul>
</body>

</html>

为什么第2级菜单后面不能继续点开了?

------解决方案--------------------
问题的本质在于你点击了子菜单后由于冒泡事件响应机制
又调用了一遍根节点的pop事件,所以点不下去了

只要在function pop(id)中加一句event.cancelBubble = true;即可

function pop(id) 

event.cancelBubble = true;
var menu = document.getElementById(id); 

if(menu.style.display=="none") 
menu.style.display="block"; 
else 
menu.style.display="none"; 

var html = ""; 
var id2 = ""; 
for(var j = 1; j <= 2; j++) 

id2 = id + j; 
html += " <li onclick=pop('"+id2+"')>123</li ><ul id='"+id2+"' style='display:none'> </ul >"; 

menu.innerHTML = html; 
//document.write(id2); 
}