掲示板/JavaScript質問板/過去ログ/一覧/ 階層付き折りたたみテキスト

0 名前： takeshi ： 2007/08/23（木） 03:58 ID:WFHY9/gG sub-.G: 【何をしたいのか】
折りたたみテキストをクリックして展開、それを階層付きで実現したいと思い、http://wolfrosch.com/misc/webdesign/expand 　のサンプルを元にすすめています。

【現在の状況】
サンプルを修正しクリックしたノードのparentNodeではなくnextSiblingを探し、DIVであればclass名を変え表示のオンオフを制御するようにしました。そうしないと階層化したときに対応できないと判断したためです。

現在一番はじめのROOT1をクリックしたときは下層も含めて正常に折りたたまれるのですが、下層のROOT2やROOT3をクリックしても折りたたまれません。クリックされたときのnextSiblingを見てみるとROOT1をクリックした際にはきちんとDIVまでたどり着いているのですが、ROOT2やROOT3をクリックしたときは一回#textを見た後エラーでループを抜けてしまっているようなのです。この原因がわかりません。

【サンプルの提示】
<html>

<style type="text/css">
.hide .target { display:none }
.trigger { color:inherit; cursor:pointer }
.hide .trigger { color:#069 }
.trigger:after { content:url(../_img/base/hide.png) ; padding-left:0.3em; vertical-align:-1px }
.hide .trigger:after { content:url(../_img/base/show.png) }
.trigger:hover { color:#f3c }
</style>

<head>
<script>
function expand(t) {
for (var i=0; i<10; i++) {
var t = t.nextSibling;

alert(t.nodeName);

if (t.nodeName == 'DIV') {
if (t.className=='hide') {
t.className = 'show';
break;
} else if (t.className=='show') {
t.className = 'hide';
break;
}
}
}
}

</script>
</head>

<span class="trigger" onclick="expand(this)">ROOT1</span>
<div class="show">
<p class="target">test Item #0</p>
<p class="target">
<span class="target" onclick="expand(this)">ROOT2</span>
<div class="show">
<p class="target">test Item #1</p>
<p class="target">test Item #2</p>
</div>
</p>
<p class="target">
<span class="target" onclick="expand(this)">ROOT3</span>
<div class="show">
<p class="target">test Item #3</p>
<p class="target">test Item #4</p>
</div>
</p>
</div>

</html>

【何をしてみたのか】
実際にはXMLの表示部分を階層構造で折りたためるようにしたいと思っています。

【検索用語】
折りたたみ javascript DOMなど

【備考】
特にこの方法にこだわっているわけではなく、望む動作をするのであれば他の方法も考えています。
代替案などでも考えがあれば教えてください。

よろしくお願いします。

1 名前：匿名： 2007/08/23（木） 03:58 ID:SK69rnxx sub-Cz

形式的に >>0 は HTML でも XML でもない謎文書なんだけど、とりあえず HTML 4.01 と仮定します（少なくとも XHTML ではありえないので）。

<p ...>
  <span ...>ROOT2</span>
  <div ...>

div 要素は p 要素の子孫にはなりえない。そこで、HTML 4.01 では p 要素の終了タグが省略可であることから、div 要素の直前に </p> が省略されているものと見なされます。

<p ...>
  <span ...>ROOT2</span>
  </p><div ...>

ゆえに、div 要素は span 要素の兄弟ではなく、p 要素の兄弟ノードです。まあ要するに、HTML の書き方のミス。

> 階層構造で折りたためるようにしたい

・他の枝をクリックしたときに、それまで開いていた枝を全て閉じるのか否か。
・対象ブラウザは何か（XML を考慮するなら、IE と Fx/Op/Sf では書き方が完全に異なる）。

等の条件で、いろいろ変わってきます。