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://leonardorestaurant.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 に答える