Переключатель видимости Div не работает

Question

Я создаю древовидную структуру, используя html и css. Это конечная структура, которую я должен достичь: http://jsfiddle.net/yrE7N/1/

Что мне нужно, при щелчке по узлу появится его дочерний узел.

Я сделал это до сих пор:

JS скрипку: http://jsfiddle.net/ZTkLg/11/

Я использовал этот JS функция

var _hidediv = null; 
    function showdiv(id) { 
    if(_hidediv) 
     _hidediv(); 
    var div = document.getElementById(id); 
    div.style.display = 'block'; 
    _hidediv = function() { div.style.display = 'none'; }; 
} 

Дело в том, функция JS, кажется, не переключать видимость div stage-two.

Я использовал эту функцию раньше на этой странице: http://leonardorestaurant.in/menu, и это сработало, но я не могу понять проблему в этом случае.

Answer 1

Попробуйте

<a href=# onclick="showdiv('two');">Some text here</a> 

и

var flag = true; 
function showdiv(id) { 
    var div = document.getElementById(id); 
    div.style.display = flag ? 'none' : 'block'; 
    flag = !flag; 
} 

Демо: Fiddle

Answer 2

Консоль в моем браузере распечатывает:

Uncaught TypeError: Cannot read property 'style' of null 

Это означает, что здесь:

div.style.display = 'block'; 

ДИВ не результат вы думаете, это должно быть ... Это говорит о том, что идентификатор не то, что мы думаем, что здесь:

var div = document.getElementById(id); 

Что я подтвердил с помощью:

console.log(id); 

внутри ваша функция.

значение Идентификатор фактически является <div id="two">

Таким образом, в основном у вас уже есть элемент, который вы ищете.

Однако у вас есть большие проблемы, а это то, что вам нужна функция переключения, я просто догадываюсь. Попробуйте использовать это:

function toggleDiv(id) { 
    var el = document.getElementById(id); 
    var newDisplayValue = "none"; 
    if (el.style.display && el.style.display === "none") { 
     newDisplayValue = "block"; 
    } 
    el.style.display = newDisplayValue; 
} 

и изменить это:

<a href=# onclick="toggleDiv('two');"> 

видеть here