0

我正在使用 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: //leonardoresaurant.in/menu并且它有效，但在这种情况下我无法解决问题。

4

2 回答 2

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;
}

演示：小提琴

于 2013-11-15T03:37:49.300 回答
0

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

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

看这里

于 2013-11-15T03:54:53.950 回答