PukiWikiの左メニューでonMouseOverでサブメニューを開き、onMouseOutで閉じる。

質問

PukiWikiPlusを使ってサイトを作っています。　http://pol.s263.xrea.com/lotr/

この左のメニューなんですが、将来的に項目が増えると恐ろしく長くなりそうなので、常に表示する必要の無い項目を折りたためるようにしようとしました。それで、javascriptのプラグインを導入して改造しているわけですがどうもうまくいきません。うまく説明できそうにないので実際のページの"詳細データ>戦闘>skill"のところにマウスを重ねてみてください。

---悪さをしてそうな部分のブラウザから見たソース---
<td valign=top id=rgn_content1 style="display:none;"
onMouseOut="
document.getElementById('rgn_summary1').style.display='block';
document.getElementById('rgn_content1').style.display='none';
">
<ul class="menu">
<li>skill
<ul class="menu">
<li><a href="http://pol.s263.xrea.com/lotr/index.php?TopPage" title="TopPage (6d)">TopPage</a></li>
<li><a href="http://pol.s263.xrea.com/lotr/index.php?TopPage" title="TopPage (6d)">TopPage</a></li>
<li><a href="http://pol.s263.xrea.com/lotr/index.php?TopPage" title="TopPage (6d)">TopPage</a></li>
<li><a href="http://pol.s263.xrea.com/lotr/index.php?TopPage" title="TopPage (6d)">TopPage</a></td></tr></table></li>
</ul>
</li>
---------------------------------------------

備考：
テーブルタグとリストタグの順番がおかしいのはPukiWikiとプラグインの仕様のようです。

改造中プラグインのソース http://pol.s263.xrea.com/lotr/region.zip

---

よろしくお願いします。

回答No.1

ANASTASIAK · ベストアンサー

'rgn_summary1'と'rgn_content1'という違うオブジェクトを
操作するのはこれでいいんでしょうか。例示からはもう一つの
オブジェクトIDの所在が見えないけれど。
あと、display:none;のオブジェクトにmouseoverイベントを
仕掛けても反応しないのでは？

お礼

編集途中で送信してしまいました・・・。

上のソースはテーブルタグをやめてdivにして整理した状態です。先ほどstyle="display:none;"になっていたのは、ブラウザでソースを表示すると初期状態、つまり縮小表示している状態のソースを表示するからじゃないかと思っています。

補足

cssとhtmlについては多少分かる物のjavascriptは勘だけでいじってるので正しく理解できているかわかりませんが恐らく、

・rgn_summary1は縮小しているときに表示したいもの
　Wikiでは"#region(skill)"の()内にあるもの
・rgn_content1はマウスを重ねたときに表示したいもの
　Wikiでは"#region"と"#endregion"の間にあるもの

// ■ 縮小表示しているときの表示内容。
function buildSummaryHtml(){
$summarystyle = ($this->isopened) ? "display:none;" : "display:block;";
return <<<EOD

<div id=rgn_summary$this->callcount style="color:gray;$summarystyle"
onMouseOver="
document.getElementById('rgn_summary$this->callcount').style.display='none';
document.getElementById('rgn_content$this->callcount').style.display='block';
">$this->description
</div>
EOD;
}

// ■ 展開表示しているときの表示内容ヘッダ部分。ここの<td>の閉じタグは endregion 側にある。
function buildContentHtml(){
$contentstyle = ($this->isopened) ? "display:block;" : "display:none;";
return <<<EOD

<div valign=top id=rgn_content$this->callcount style="$contentstyle"
onMouseOut="
document.getElementById('rgn_summary$this->callcount').style.display='block';
document.getElementById('rgn_content$this->callcount').style.display='none';
">
EOD;
}