Мне нужна помощь с моим JavaScript, поскольку он ведет себя странно, пока я тестирую Internet Explorer 7, но он отлично работает в Internet Explorer 8, Google Chrome и Firefox. проблема в том, что когда я нажимаю на крайние левые части P1, P2, Cello, C2, C1 с зеленой заштрихованной областью, мое дерево рушится обратно к пункту, который не должен произойти. Это должно быть несколько иначе, если я нажму на паркер или ячейку или элемент, его части будут закрыты или открыты.
var 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) {
e = e || window.event;
if ((e.target || e.srcElement).tagName !== "LI") return;
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) {
e = e || window.event;
if ((e.target || e.srcElement).tagName !== "LI") return;
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));}
}
Ваш JavaScript работает отлично, даже в IE7 (протестирован с использованием режима эмуляции в IE11).
Различное поведение, которое вы видите, связано с тем, что IE7 и ниже используют margin
для отступов ul
тогда как во всех других браузерах используется padding
. Добавьте следующий CSS для нормализации:
ul {
margin: 0;
padding: 0 0 0 40px;
}
Вы можете использовать инструмент выбора элемента DOM Explorer (нажмите F12, чтобы открыть), чтобы увидеть, какой элемент вы нажимаете, чтобы быстрее исправлять такие проблемы.