掲示板/JavaScript質問板/過去ログ/一覧/ ツリーで表示、非表示

0 名前： サスケ ： 2005/12/27 19:41: 今の所表示、非表示はできるのですが、下のような
イメージでツリーにするやり方があれば教えてもら
えればと思います。

■表示、非表示
┣■表示[1]
┃　
┣■表示[2]
┃
┣■表示[3]
┃　　　　
　
<sample.html>

<html>
<head>
<title>表示、非表示</title>
<script type="text/JavaScript">

</script>
</head>
<body>
<a onClick="Show('display0')">
<h>□表示、非表示</h>
<div id="display0" style="display:block">
<br>
<a onClick="Show('display1')">
<div class="cap">□表示[1]</a></div>
<div id="display1" style="display:block">
<table border="1">
<col width="100">
<tr>
<th>No1</th>
</tr>
</table>
</div>
<br>

<a onClick="Show('display2')">
<div class="cap">□表示[2]</a></div>
<div id="display2" style="display:block">
<table border="1">
<col width="100">
<tr>
<th>No2</th>
</tr>
</table>
</div>
<br>

<a onClick="Show('display3')">
<div class="cap">□表示[3]</a></div>
<div id="display3" style="display:block">
<table border="1">
<col width="100">
<tr>
<th>No3</th>
</tr>
</table>
</div>
</body>
</html>

1 名前： S ： 2005/12/27 19:41: JavaScript以前に、文法もだいぶおかしいみたいだけど？

参考）文法チェッカ
http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html

2 名前： m035 ： 2005/12/27 19:41 ［URL］: >>1
を参考にHTMLは自力で何とかするとして、JavaScriptとしては
document.all[id].style;
がいただけない表現です。
ブラウザ判別する気がないなら、
document.getElementById(id).style;
にとりあえず変更したほうが良いでしょう。

■表示、非表示
┣■表示[1]
┃　
┣■表示[2]
┃
┣■表示[3]
┃
　　　　
のようにしたいそうですが、それはタグに┣とか足せばいいと思いますよ。

3 名前： Pid ： 2005/12/27 19:41: > ┣とか足せばいい
の部分を自動化してみました（CSS の list-style や content を使うとすっきりしますが，とりあえず）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>定義リストをツリー化</title>
<script type="text/javascript">

(function () {
////////////////////
if (! document.getElementById || 'undefined' == Function.prototype.call) return;

function dispatchEvent (type, handler) {
this./*@cc_on @if (@_jscript) attachEvent ('on' + @else@*/ addEventListener (/*@end@*/ type, handler, false);
}

function initializeDocument () {
var I = arguments.length;
var i = 0;
while (i < I) dispatchEvent.call (this, 'load', createLoadHandler.call (null, arguments[i++]));
}

function initializeTarget () {
for (var i = 0; this[i]; i++) {
findDD.call (this[i], createListMarker);
createSwitchHandler.call (null, this[i]) ();
dispatchEvent.call (this[i], 'click', createSwitchHandler.call (null, this[i]));
}
}

function createListMarker () {
this.insertBefore(document.createTextNode(isLastDD.call (this) ? '\u2514' : '\u2523'), this.firstChild);
}

function createSwitchHandler (node) {
return function () { findDD.call (node, function () { switchDisplay.call (this.style); } ); }
}

function createLoadHandler (id) {
return function () {
var node = document.getElementById (id);
if (node) initializeTarget.call (node.getElementsByTagName ('DT'));
}
}

function switchDisplay () {
this.display = (!this.display || this.display == 'block') ? 'none' : 'block';
}

function findDD (callback) {
if (this.nodeName == 'DD') callback.call (this);
if (! isDTorEND.call (this)) findDD.call (this.nextSibling, callback);
}

function isDTorEND () {
return ! this.nextSibling || this.nextSibling.nodeName == 'DT';
}

function isLastDD () {
return isDTorEND.call (this) || ((this.nextSibling.nodeName != 'DD') && isLastDD.call (this.nextSibling));
}

////////////////////
initializeDocument.apply (null, arguments);
} )
//////////////////////////////////////////////////////////////////////
// ↓↓ツリー化したい dl 要素の id を指定する（複数指定可）

('menu-1', 'menu-2');

// ↑↑ここまで
//////////////////////////////////////////////////////////////////////

</script>
<h1>dt 要素をクリックすると後続する dd 要素を表示</h1>

<dl id="menu-1">
<dt>表示・非表示</dt>
<dd>表示 1</dd>
<dd>表示 2</dd>
<dt>表示・非表示</dt>
<dd>表示 3</dd>
<dd>表示 4</dd>
</dl>

<dl id="menu-2">
<dt>表示・非表示</dt>
<dd>表示 5</dd>
</dl>

4 名前： Pid ： 2005/12/27 19:41: 今 Windows マシンで確認したら罫線の太さが違ってた…orz。

├（\u251C）
└（\u2514）
┣（\u2523）
┗（\u2517）

なお，サスケさんのお望みのもの，検索すればもっと洗練されたものが山ほど見つかるはずです。
・http://javascript.cooldev.com/scripts/cooltree/
・http://inspire.server101.com/js/xc/
・http://www2.ocn.ne.jp/%7Eyoochan/decoration/JavaScript/sample/DHTML_samp13.htm