ある一定の場所を開く、閉じる

[新着] Webテンプレートを仮オープンしました

0   名前： Wepia ： 2006/12/22（金） 19:02  ［URL］  ID:5QMC/n.h
あの名前も仕組みもなにも知らないんですが

図①
ーーーーーーーーーーーーーーーーー
×○●×○●×○●×○●×○●×○●
○○○○○○○○○○○○○○○○○○○○
リンク１
×○●×○●×○●×○●×○●×○●
ーーーーーーーーーーーーーーーーー
っとなっていてリンク1をクリックすると
図②
ーーーーーーーーーーーーーーーーー
×○●×○●×○●×○●×○●×○●
○○○○○○○○○○○○○○○○○○○○
リンク１
△▲▽▼△▲▽▼△▲▽▼△▲▽▼△▲▽▼
△▲▽▼△▲▽▼△▲▽▼△▲▽▼△▲▽▼

×○●×○●×○●×○●×○●×○●
ーーーーーーーーーーーーーーーーー
と言う風にリンク１の内容が表示される
でまた閉じると図①になる

ヤフーのブログとかで良くある物です。
たとえばhttp://blogs.yahoo.co.jp/a_0l23/MYBLOG/yblog.htmlで「コメント」の所などです。
これはどうやったらいいか教えてください
1   名前： DDD ： 2006/12/22（金） 19:02  ID:ie7DjCNY
そのブログのソースに全部書いてあります。
こっそり自分のとこに写し取って使っちゃえ！
2   名前： Wepia ： 2006/12/22（金） 19:02  ［URL］  ID:5QMC/n.h
まぁ解析してみたんですが、うまくいかないんですよ
3   名前： Wepia ： 2006/12/22（金） 19:02  ID:Tiu1Rnxw
どなたか教えて下さい
4   名前： NullPo ： 2006/12/22（金） 19:02  ID:1Bb3RL38
誰も答えないのはきっとやけに聞かれる内容だから。

<p>×○●×○●×○●×○●×○●×○●</p>
<p>○○○○○○○○○○○○○○○○○○○○</p>
<div>
<div onclick="this.parentElement.getElementsByTagName('div')[1].style.display='block'">リンク１</div>
<div style='display:none;'>
△▲▽▼△▲▽▼△▲▽▼△▲▽▼△▲▽▼<br>
△▲▽▼△▲▽▼△▲▽▼△▲▽▼△▲▽▼
</div>
</div>
<p>×○●×○●×○●×○●×○●×○●</p>

5   名前： Wepia ： 2006/12/22（金） 19:02  ［URL］  ID:5QMC/n.h
これ閉じないんですけど....こちらのミスですか？
あとリンクみたいに手のマークにならないのも不思議です
6   名前： カヅサツ ◆ThCi95HEzw ： 2006/12/22（金） 19:02  ［URL］  ID:O5hEMlpW
> これ閉じないんですけど....こちらのミスですか？

http://wepia1.hp.infoseek.co.jp/ を拝見しましたが、>>4 がどこにも見当たりませんでした。
実際に拝見してみないと、どうミスっているか検証できないです。

> あとリンクみたいに手のマークにならないのも不思議です

リンクじゃないからです。
7   名前： チャンタ ： 2006/12/22（金） 19:02  ID:wfv3mWbZ
これ、この前某サイトで解説を読んで、自分でもやりました。
Javascriptの関数を呼び出してるんで、４の方とはちょっとソースが変わりますが、
こう言う感じでいいのではないかと。（自分とこのを丸写しです。）
ただし、Javasciptの関数は、HTMLに書き込むことを前提に書きましたが、自分は外部スクリプトにしてます。

<!--ヘッダに書き込む-->
<script type="text/javascript">
<!--
function display_open_close(id){
		if(document.getElementById(id).style.display == "none"){
			document.getElementById(id).style.display = "block";
		}
		else{
			document.getElementById(id).style.display = "none";
		}
}
-->
</script>


<!--HTMLソース部分-->
<p>×○●×○●×○●×○●×○●×○●</p>
<p>○○○○○○○○○○○○○○○○○○○○</p>
<div>
<a href="javascript:void(0)" onclick="display_open_close('hoge')">リンク１</a>
<div style='display:none;' id="hoge">
△▲▽▼△▲▽▼△▲▽▼△▲▽▼△▲▽▼<br>
△▲▽▼△▲▽▼△▲▽▼△▲▽▼△▲▽▼
</div>
</div>
<p>×○●×○●×○●×○●×○●×○●</p>


４の方と違うのは、見せたり隠したりする対象をTagNameでなくIdで指定している点です。
あと、条件式をくっつけて、「見えてるときは隠す、隠れているときは見せる」ようにしてところです。

自分のところはとりあえずこれで動いてます。
よろしければお試しくださいませ。
8   名前： Wepia ： 2006/12/22（金） 19:02  ［URL］  ID:5QMC/n.h
>>6の「http://wepia1.hp.infoseek.co.jp/ を拝見しましたが、>>4 がどこにも見当たりませんでした。
実際に拝見してみないと、どうミスっているか検証できないです。」について

うまく動かないから設置していないと言うことです。CGIは実際アップロードしてわかる事がたくさんあるので完成したらすぐアップロードしますがJavascriptなどは自分のパソコン内で完成させてからアップします。Javascriptは自分のパソコン内でのうごきとサーバー上での動きは異なるんですか？
9   名前： 匿名 ： 2006/12/22（金） 19:02  ID:5m2bGK6y
>>8
> Javascriptは自分のパソコン内でのうごきとサーバー上での動きは異なるんですか？

そういうことも多々ある。そもそも、JavaScript なんて「動かなくて当たり前」と思って作らないと、訪問者が泣く羽目になる。

「階層メニュー」「ツリーメニュー」で検索してみると吉。はっきり言うが、これに関しては、分からないなら手を出さない方が無難。


>>4
parentElement → parentNode に修正した方が良い。

>>7
できれば style="display: none" を埋め込まず、初期化関数などで動的に初期化した方が良い。
10   名前： NullPo ： 2006/12/22（金） 19:02  ID:1Bb3RL38
>>9
ご指摘ありがとうございます。
parentElementっていうのはもしかしてIE限定ですかね。
parentNodeのほうが確かによさそうです。以降気をつけます。
11   名前： Wepia ： 2006/12/22（金） 19:02  ［URL］  ID:5QMC/n.h
>>7で目的を果たす事ができたので>>7を使わせていただきます。ありがとうございました。
一覧へ戻る