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

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



0   名前: Wepia : 2006/12/22(金) 19:02  [URL]  ID:5QMC/n.h
あの名前も仕組みもなにも知らないんですが

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

×○●×○●×○●×○●×○●×○●
ーーーーーーーーーーーーーーーーー
と言う風にリンク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'">リンク1</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の関数を呼び出してるんで、4の方とはちょっとソースが変わりますが、
こう言う感じでいいのではないかと。(自分とこのを丸写しです。)
ただし、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')">リンク1</a>
<div style='display:none;' id="hoge">
△▲▽▼△▲▽▼△▲▽▼△▲▽▼△▲▽▼<br>
△▲▽▼△▲▽▼△▲▽▼△▲▽▼△▲▽▼
</div>
</div>
<p>×○●×○●×○●×○●×○●×○●</p>


4の方と違うのは、見せたり隠したりする対象を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を使わせていただきます。ありがとうございました。

一覧へ戻る