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無法正常工作

回答

相關問題