Дерево с JavaScript не работает должным образом в Internet Explorer 7

0

Мне нужна помощь с моим 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));}
}

FIDDLE

  • 0
    Нажмите кнопку «JSHint» в jsfiddle. Я бы начал исправлять все эти предупреждения в первую очередь.
  • 0
    Сэр, все готово, теперь, пожалуйста, помогите мне с проблемой
Показать ещё 11 комментариев
Теги:
tree

1 ответ

0
Лучший ответ

Ваш JavaScript работает отлично, даже в IE7 (протестирован с использованием режима эмуляции в IE11).

Различное поведение, которое вы видите, связано с тем, что IE7 и ниже используют margin для отступов ul тогда как во всех других браузерах используется padding. Добавьте следующий CSS для нормализации:

ul {
    margin: 0;
    padding: 0 0 0 40px;
}

Вы можете использовать инструмент выбора элемента DOM Explorer (нажмите F12, чтобы открыть), чтобы увидеть, какой элемент вы нажимаете, чтобы быстрее исправлять такие проблемы.

  • 0
    Большое спасибо

Ещё вопросы

Сообщество Overcoder
Наверх
Меню