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

Мне нужна помощь с моим JavaScript, поскольку он ведет себя странно, пока я тестирую на нем. проблема в том, что когда я нажимаю на крайние левые P1, P2, Cello, C2, C1 с зеленой заштрихованной областью, мое дерево рушится обратно до Пункт, которого не должно быть. Это должно быть примерно так, если я нажму на parker или cell или его части будут закрыты или открыты.Дерево с 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

вы "li" занимает всю ширину зеленую область – 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 не работает должным образом

ответ

Смежные вопросы