javascript - 带有 JavaScript 的树无法正常工作

Question

我的 JavaScript 需要一些帮助，因为在我测试它时它的行为很奇怪。问题是，每当我在绿色阴影区域中单击 P1、P2、Cello、C2、C1 的最左侧时，我的树就会折叠回 Item，这应该不会发生。它应该有点像，如果我点击 parker 或 cell 或元素，它的子部分将被关闭或打开。

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

---

谢谢

Answer 1

你的 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", "");
        }

...