JavaScript与JavaScript无法正常工作

我需要一些JavaScript帮助，因为它在测试时表现得很奇怪。问题是，当我点击P1，P2，Cello，C2，C1的极端左侧与绿色阴影区域时，我的树倒塌回项目这不应该发生。它应该是这样的，如果我点击parker或单元格或项目，它的子部分将被关闭或打开。JavaScript与JavaScript无法正常工作

FIDDLE

var dataSource = ({ 
    "Pen": ({ 
     "Parker": ({ 
      "P1": ({}), 
       "P2": ({}) 
     }), 
      "Cello": ({ 
      "C2": ({}), 
       "C1": ({}) 
     }) 
    }) 
}), 
    Objectkeys = function(obj){ 
     a = [] 
     for(var prop in obj){ 
      if (obj.hasOwnProperty(prop)) { 
      a.push(prop); 
      } 
     }; 
     return a; 
    }, 
    traverseObject = function (obj) { 
     var ul = document.createElement("ul"), 
      li,span; 

     for (var prop in obj) { 
      li = document.createElement("li"); 
      li.appendChild(document.createTextNode(prop)); 
      li.style.backgroundColor = "green"; 
      li.onclick = function(e) { 
       var classNames = this.className; 
       if (classNames.indexOf("hidden") == -1) { 
        this.className += "hidden"; 
       } else { 
        this.className = this.className.replace("hidden", ""); 
       } 
       if (!e) 
        e = window.event; 
        if (e.stopPropagation) { 
         e.stopPropagation(); 
        } 
       else { 
        e.cancelBubble = true; 
       } 
      } 
      if (typeof obj[prop] == "object" && Objectkeys(obj[prop]).length) { 

       li.appendChild(traverseObject(obj[prop])); 
      } else { 
       li.className += "leaf"; 
      } 
      ul.appendChild(li); 
      console.log(ul); 
     } 
     return ul; 
    }, 
    sortedObject = function (obj) { 
     document.getElementById("dvList2").innerHTML = ""; 
     var ul = document.createElement("ul"), 
      li,keys = Objectkeys(obj).sort(); 
     for (prop in keys) { 
     var li = document.createElement("li"); 
      li.appendChild(document.createTextNode(keys[prop])); 
      li.onclick = function(e) { 
       var classNames = this.className; 
       if (classNames.indexOf("hidden") == -1) { 
        this.className += "hidden"; 
       } else { 
        this.className = this.className.replace("hidden", ""); 
       } 
       if (!e) 
        e = window.event; 
        if (e.stopPropagation) { 
         e.stopPropagation(); 
        } 
       else { 
        e.cancelBubble = true; 
       } 
      } 
      if (typeof obj[keys[prop]] == "object" && Objectkeys(obj[keys[prop]]).length) { 
       li.appendChild(sortedObject(obj[keys[prop]])); 
      } else { 
       li.className += "leaf"; 
      } 
      ul.appendChild(li); 
      console.log(ul); 
     } 
     return ul; 
    }; 
window.onload = function() { 
    document.getElementById("dvList1").appendChild(traverseObject(dataSource)); 
    document.getElementById("hlGSL").onclick = function(){document.getElementById("dvList2").appendChild(sortedObject(dataSource));} 
}

谢谢

来源

2014-02-14 user3307470

我对你在哪里点击有点困惑，因为当我点击列表项的最右边缘时，什么也没有发生。你可以包含截图吗？ – Adosi

请点击左边的绿色区域 – user3307470

你“李”占据全部宽度的绿色区域 – brunozrk

你li.onclick = function(e) { }正在注册最<li>元素嵌套树。添加一个语句来确保用户点击的实际上是一个子节点。

... 
li.style.backgroundColor = "green"; 
li.onclick = function(e) { 

    // Is the parent's parent the dvList1 <div>? 

    if (li.parent.parent.id == "dvList1") { 

     // Do nothing  

    } else { 

    // If it isn't, do the rest of the code 

     var classNames = this.className; 
     if (classNames.indexOf("hidden") == -1) { 
      this.className += "hidden"; 
     } else { 
      this.className = this.className.replace("hidden", ""); 
     } 

...

来源

2014-02-14 14:24:48 Adosi

JavaScript与JavaScript无法正常工作

回答

相关问题