Javascript Div可见性切换不工作

我正在使用html和css制作一个树结构。 这是我应该达到的最终结构：

我需要的是，单击一个节点，它的子节点就会出现

到目前为止，我一直在这样做：

JS小提琴：

我使用了这个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

第二阶段的可见性

我以前在这个页面上使用过这个函数：它可以工作，但我无法解决这个问题
 试试看

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

演示：
我的浏览器中的控制台打印出：

Uncaught TypeError: Cannot read property 'style' of null 

这意味着：

div.style.display = 'block';

div不是你认为应该的结果。。。这告诉我们id不是我们在这里所想的：

var div = document.getElementById(id);

我通过以下方式确认：

console.log(id);

在你的功能里面

id值实际上是

所以，基本上你已经拥有了你想要的元素

然而，你有更大的问题，那就是你需要一个切换函数，我只是猜测。尝试使用以下方法：

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');">

我看到的第二个问题是
showdiv（two）
没有传递文本，而是传递一个不存在的变量。使用
'two'
而不是在
href
属性周围加上引号。我添加了
显示：无；'到
第二阶段`。小提琴仍然有效，但需要点击两下才能显示div。知道为什么吗？@Siddharth然后设置
var flag=false
如果可以的话，我希望删除对外部变量的依赖关系（并且可以使用
div.id.display
值来检查要切换到的状态。请参阅我的解决方案。
<a href=# onclick="toggleDiv('two');">