プロが教える店舗&オフィスのセキュリティ対策術

JavaScriptを使わずに階層式(折りたたみ)メニューを表示させる事は可能でしょうか?

CGIで作成している日記ページの中の、ある1記事・1箇所だけに「文字をクリックすると続きが表示される」と言う仕掛けを置きたいと思っています。
そこで、階層式メニューを応用すればいいのでは、と考えました。

ただ、JavaScriptを使用するとなると、(私の知識では)ヘッダ部分にScriptを書き込まなければなりません。
CGIでページを作成しているため、ヘッダ部分に書かれたScriptでは、折りたたみメニューが必要ないページのヘッダにも入ってしまいます。

・Javascriptを使用せずに階層式メニューを表示させるには?
・HEAD部分にScriptを記述せずに(BODYへの記述のみで)階層式メニューは可能か?
・階層式メニューに似た動作をするものはあるか?

どなたかお分かりになる方、教えてください。
何卒宜しくお願いいたします。

A 回答 (4件)

>Javascriptを使用せずに階層式メニューを表示させるには?


普段表示していないものを、クリック等の動作によって表示させるには、なんらかのスクリプトが必要になります。
>HEAD部分にScriptを記述せずに(BODYへの記述のみで)階層式メニューは可能か?
onclickなどのイベントに直接書けます
<span onclick="javascript:document.getElementById(MENU1).style.display='block'">続きを読む</span>
<div ID="MENU1"style="display:none;">
中身1<br>
中身2<br>
中身3<br>
</div>
    • good
    • 0
この回答へのお礼

回答ありがとうございます。
なるほど、HEAD部分に記述しなくてもonclickを使えば可能なんですね。
勘違いと思い込みで完全に盲点でした。
ですが、教えて頂いた物だとなぜかエラーがでてしまいました・・・・・・
他の方法でうまく行きましたので、今回はそちらを使ってみようと思います。

お礼日時:2004/10/11 02:42

>Javascriptを使用せずに階層式メニューを表示させるには?



HTMLだけでは無理
他のスクリプト言語を用いるか、Flashなどのソフトを使うしかない。

>HEAD部分にScriptを記述せずに(BODYへの記述のみで)階層式メニューは可能か?

別に操作する関数をHEAD内に書かなくても良い
HEAD部分に書くのは関数定義などをひとところにまとめたほうが見やすいとかそういう問題。


個人的には
・スクリプトの必要なページとそうでないページでHEADを分かる
・全てのページに入れる
で済ませるとおもいます。
なぜ折りたたみメニューにするための数行程度のスクリプト(関数)の定義が使わないページにも入ってはいけないのかが不明です。
その点が分かればもっといい代替案などもでてくるのではないかとおもわれます
    • good
    • 0
この回答へのお礼

回答ありがとうございます。
全てのページに同じヘッダがはいってしまう仕様なので、分ける事ができないのです。
いわれてみれば全てのページにスクリプトが入っていても問題ない気がしてきましたが(^^;
何はともあれ、他の方に教えていたスクリプトでうまく行きましたので、そちらを使ってみたいと思います。

お礼日時:2004/10/11 02:46

CSS と組み合わせれば楽なんですが



<DIV id="key1_1" OnClick="this.style.display='none', key1_2.style.display='inline', list1.style.display='inline'" style="cursor: hand">
■ボタンテスト1</DIV>
<DIV id="key1_2" OnClick="this.style.display='none', key1_1.style.display='inline', list1.style.display='none'" style="display: none; cursor: hand">
□ボタンテスト1</DIV><BR>
<DIV id="list1" class="none">
・商品01<BR>
・商品02<BR>
・商品03</DIV>

こうすると クリックするごとに表示/非表示を切り替え
できます。
    • good
    • 0
この回答へのお礼

ありがとうございます。
表示と非表示を切り替えられるのが便利でしたし、一番わかりやすく、自分でアレンジしやすかったので、教えて頂いた物をちょこっと変えて使ってみたいと思います。

お礼日時:2004/10/11 02:38

擬似的にと言うことならばHTMLだけで行うことができます。


しかし、全ての項目に対して、開いている・閉じているのメニューを作成しなければいけないので面倒。
(4つのメニューがある場合2の4乗で16ページ作らないとだめ)

CGIで同じことをやる場合、各メニューに開いている、閉じているというフラグを持たせてやれば4つのif文で対処できます。
    • good
    • 0
この回答へのお礼

回答ありがとうございました。
自分で作成したCGIではないので、この方法は使えないのです。

お礼日時:2004/10/11 02:48

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!