Question

我正在使用html和css创建树结构。这是我应该达到的最终结构：http://jsfiddle.net/yrE7N/1/

我需要的是，在点击节点时，将显示其子节点。

到目前为止我已经这样做了：

我使用过这个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';

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

var div = document.getElementById(id);

我通过使用确认：

console.log(id);

你的功能。

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

Div可见性切换不起作用

2 个答案: