菜单中append添加的子节点，再为其append添加子节点就出问题了，求指点
要做一个动态加载的菜单。从.ashx里加载数据，默认前台页面里只有一级节点，点击加载下一级节点，加载到第三级就有问题了，点击加载完后再点击不能收回，什么原因呢
- HTML code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="AppMenu_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title></title> <script src="../Content/jquery-1.7.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#AppMenu div span").click(function() { // $(this).css("background", "red"); var m_div = $(this); if (m_div.closest("div").children("div").text() == "") { var mid = $(this).attr("id"); // alert(mid); $.post("AppMenuExt.ashx?p=" + mid, function(data, status) { if (status != "success") { alert("加载失败"); } else { //alert(data.toString()); // m_div.closest("div").children("div").css("background", "green"); if (data.toString() != null) { m_div.closest("div").children("div").append(data.toString()); // m_div.closest("div").children("div").append("<span>aaaa</span>"); //alert(m_div.children("img").attr("src")); m_div.children("img").attr("src", "./images/menu2.png"); new appMenu1("mid", mid); //alert(mid); } } }); } else { //alert("div not null"); if (m_div.closest("div").children("div").css("display") == "none") { m_div.children("img").attr("src", "./images/menu2.png"); m_div.closest("div").children("div").css("display", "block"); } else { m_div.children("img").attr("src", "./images/menu1.png"); m_div.closest("div").children("div").css("display", "none"); } } }); }); function appMenu1(key, value) { $(".folder").click(function() { // alert("key=" + key + "|value=" + value); //$(this).css("background", "blue"); var divspan = $(this); //alert(mid); if (divspan.closest("div").children().text() == "") { var mid = $(this).attr("id"); $.post("AppMenuExt.ashx?p=" + mid, function(data, status) { if (status != "success") { alert("加载失败"); } else { // alert(data.toString()); if (data.toString().length != "") { divspan.append(data.toString()); divspan.children("img").attr("src", "./images/menu2.png"); new appMenu2("mid2", mid); // alert(mid); // divspan.children().live("click",appMenu2("mid2", mid)); } else { // alert(divspan.children("img").attr("src")); if (divspan.children("img").attr("src") == "./images/menu2.png") { divspan.children("img").attr("src", "./images/menu1.png"); } else { divspan.children("img").attr("src", "./images/menu2.png"); } } } }); } else { // alert("div not null !!!!"); if (divspan.closest("div").children().css("display") != "block") { divspan.children("img").children("src", "./images/menu2.png"); divspan.closest("div").children("div").css("display", "block"); } else { divspan.children("img").attr("src", "./images/menu1.png"); divspan.closest("div").children("div").css("display", "none"); } } }) } function appMenu2(key, value) { $(".folder1").click(function() { // alert("key=" + key + "|value=" + value); // $(this).css("background", "blue"); var spandiv = $(this); //alert(mid); if (spandiv.closest("div").children().text() == "") { var mid = $(this).attr("id"); $.post("AppMenuExt.ashx?p=" + mid, function(data, status) { if (status != "success") { alert("加载失败"); } else { // alert(data.toString()); if (data.toString().length != "") { spandiv.append(data.toString()); spandiv.children("img").attr("src", "./images/menu2.png"); new appMenu3("mid2", mid); //spandiv.children().live("click",appMenu("mid2", mid)); } else { // alert(divspan.children("img").attr("src")); if (spandiv.children("img").attr("src") == "./images/menu2.png") { spandiv.children("img").attr("src", "./images/menu1.png"); } else { spandiv.children("img").attr("src", "./images/menu2.png"); } } } }); } else { } }) } function appMenu3(key, value) { $(".folder2").click(function() { var spanspan=$(this); if (spanspan.find("img").attr("src") == "./images/menu2.png") { spanspan.find("img").attr("src", "./images/menu1.png");} else { spanspan.find("img").attr("src", "./images/menu2.png");} }) } </script></head><body> <form id="form1" runat="server"> <div id="AppMenu"> <%var ds = SQLServerDAL.DApp_Menu.GetList(0); %> <%foreach (var item in ds){ if (item.MId.Length < 3){ %> <div> <span id="<%=item.MId %>"> <img src="images/menu1.png" /><%=item.MName%></span><div></div></div> <%} } %> </div> </form></body></html>
[解决办法]
- HTML code
已经下一级节点是包含在上一级节点中的，点击下一级节点的时候会同时触发上一级节点的事件导致隐藏下一级节点了你要阻止时间冒泡才行，而且你第三级的third样式加错地方了，加到子节点了，而不是父节点<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title> <script src="jquery-1.7.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#first").click(function () { if ($(this).closest("div").children("div").text() == "") { $(this).closest("div").children("div").append('<div class="second" style="background-color:yellow">aaaaaa<div></div></div>'); $(".second").live("click", function (e) { e.stopPropagation();///////阻止事件冒泡 if ($(this).closest("div").children("div").text() == "") { // $(this).closest("div").children("div").append('<div style="background-color:blue">bbbbb<div class="third"></div></div>');///======> $(this).closest("div").children("div").append('<div style="background-color:blue" class="third">bbbbb<div></div></div>'); $(".third").live("click", function (e) { e.stopPropagation();///////阻止事件冒泡 if ($(this).closest("div").children("div").text() == "") { $(this).closest("div").children("div").append('<div style="background-color:blue">cccc<div></div></div>'); } else { alert("三级节点已经有子节点"); if ($(this).closest("div").children("div").css("display") != "none") { $(this).closest("div").children("div").css("display", "none"); } else { $(this).closest("div").children("div").css("display", "block"); } } }) } else { //alert("二级节点已经有子节点"); if ($(this).closest("div").children("div").css("display") != "none") { $(this).closest("div").children("div").css("display", "none"); } else { $(this).closest("div").children("div").css("display", "block"); } } }) } else { //alert("一级节点已经有子节点"); if ($(this).closest("div").children("div").css("display") != "none") { $(this).closest("div").children("div").css("display", "none"); } else { $(this).closest("div").children("div").css("display", "block"); } } }) });</script></head><body> <div style="background-color:Red"><span id="first">111111</span><div></div></div> <div style="background-color:Red"><span>222222</span></div> <div style="background-color:Red"><span>333333</span></div></body></html>