Развернуть и свернуть JavaScript

Question

Я прислушался, чтобы добавить расширение и свернуть к моему следующему коду JavaScript. Мне нужно + (плюс) изображение при сведении и - (минус) изображение при расширении. Пожалуйста, помогите мне с кодом, чтобы сделать это. Пожалуйста, см. DataSource, если я нажму на часы, они будут расширяться, и часы будут отображаться, и когда я снова нажму на часы, титан исчезнет.

Fiddle

var dataSource = ({ 
      "Watch": ({ 
       "Titan": ({}), 
      }) 
     }), 
    traverseObject = function (obj) { 
     var ul = document.createElement("ul"), 
      li; 

     for (var prop in obj) { 
      li = document.createElement("li"); 
      li.appendChild(document.createTextNode(prop)); 
      li.onclick = function(){alert("Hello")} 

      if (typeof obj[prop] == "object" && Object.keys(obj[prop]).length) { 
       li.appendChild(traverseObject(obj[prop])); 

      } 
      ul.appendChild(li); 
      console.log(ul); 
     } 
     return ul; 
    }; 


window.onload = function() { 
    document.getElementById("dvList1").appendChild(traverseObject(dataSource)); 
} 

Answer 1

Live jsFiddle

Я удалил ненужные скобки из вашего DataSource и добавил третий уровень для целей тестирования.

Кроме того, что я изменил был ваш onclick к

li.onclick = function(e) { 
       e.currentTarget.classList.toggle("hidden"); 
       e.stopPropagation(); 
      } 

и поместил else утверждение, что добавляет класс leaf для листовых узлов (мы не хотим видеть, минус и плюс знаки на этих узлах) ,

if (typeof obj[prop] == "object" && Object.keys(obj[prop]).length) { 
    li.appendChild(traverseObject(obj[prop])); 
} else { 
    li.classList.add("leaf"); 
} 

, а также добавлен некоторые CSS, который отображает знаки в псевдо элементах:

ul { 
    list-style: none; 
} 

li.hidden ul { 
    display: none; 
} 

li:before { 
    content: '-'; 
    width: 10px; 
    display: inline-block; 
} 

li.hidden:before { 
    content: '+'; 
} 

li.leaf:before { 
    content: ''; 
} 

li { 
    cursor: pointer; 
} 

li.leaf { 
    cursor: default; 
} 

---

EDIT:

IE не поддерживает classList, поэтому заменил его className. Этот solution должен работать для всех браузеров.