<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);
}