JavaScriptを使わずに階層式(折りたたみ)メニューを表示させる事は可能でしょうか?
CGIで作成している日記ページの中の、ある1記事・1箇所だけに「文字をクリックすると続きが表示される」と言う仕掛けを置きたいと思っています。
そこで、階層式メニューを応用すればいいのでは、と考えました。
ただ、JavaScriptを使用するとなると、(私の知識では)ヘッダ部分にScriptを書き込まなければなりません。
CGIでページを作成しているため、ヘッダ部分に書かれたScriptでは、折りたたみメニューが必要ないページのヘッダにも入ってしまいます。
・Javascriptを使用せずに階層式メニューを表示させるには?
・HEAD部分にScriptを記述せずに(BODYへの記述のみで)階層式メニューは可能か?
・階層式メニューに似た動作をするものはあるか?
どなたかお分かりになる方、教えてください。
何卒宜しくお願いいたします。
No.3ベストアンサー
- 回答日時:
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>
こうすると クリックするごとに表示/非表示を切り替え
できます。
ありがとうございます。
表示と非表示を切り替えられるのが便利でしたし、一番わかりやすく、自分でアレンジしやすかったので、教えて頂いた物をちょこっと変えて使ってみたいと思います。
No.4
- 回答日時:
擬似的にと言うことならばHTMLだけで行うことができます。
しかし、全ての項目に対して、開いている・閉じているのメニューを作成しなければいけないので面倒。
(4つのメニューがある場合2の4乗で16ページ作らないとだめ)
CGIで同じことをやる場合、各メニューに開いている、閉じているというフラグを持たせてやれば4つのif文で対処できます。
No.2
- 回答日時:
>Javascriptを使用せずに階層式メニューを表示させるには?
HTMLだけでは無理
他のスクリプト言語を用いるか、Flashなどのソフトを使うしかない。
>HEAD部分にScriptを記述せずに(BODYへの記述のみで)階層式メニューは可能か?
別に操作する関数をHEAD内に書かなくても良い
HEAD部分に書くのは関数定義などをひとところにまとめたほうが見やすいとかそういう問題。
個人的には
・スクリプトの必要なページとそうでないページでHEADを分かる
・全てのページに入れる
で済ませるとおもいます。
なぜ折りたたみメニューにするための数行程度のスクリプト(関数)の定義が使わないページにも入ってはいけないのかが不明です。
その点が分かればもっといい代替案などもでてくるのではないかとおもわれます
回答ありがとうございます。
全てのページに同じヘッダがはいってしまう仕様なので、分ける事ができないのです。
いわれてみれば全てのページにスクリプトが入っていても問題ない気がしてきましたが(^^;
何はともあれ、他の方に教えていたスクリプトでうまく行きましたので、そちらを使ってみたいと思います。
No.1
- 回答日時:
>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>
回答ありがとうございます。
なるほど、HEAD部分に記述しなくてもonclickを使えば可能なんですね。
勘違いと思い込みで完全に盲点でした。
ですが、教えて頂いた物だとなぜかエラーがでてしまいました・・・・・・
他の方法でうまく行きましたので、今回はそちらを使ってみようと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<IFRAME>でコンテンツ部分のみ...
-
パワーポイントで参照ページを...
-
VBAでマルチページのページ指定...
-
エクセルVBAでマルチページの切...
-
TEX ページ番号について
-
ビフォアーアフターのページは...
-
ワンクッションページの構造
-
IE を開いてページ内のリンクを...
-
UserForm.showでマルチページ1...
-
新着・更新情報管理プログラム...
-
携帯端末認識User-Agentについて
-
Excel2007 VBA で2ページ目PDF
-
ページの自動ジャンプを止めるには
-
パソコンの解像度を自動認識し...
-
インフォシークでのHPの作り方
-
写真で、「クリックすると拡大...
-
カンマ区切り形式ではなく、セ...
-
キングファイルの背表紙を作成...
-
ExcelのROUND関数を一括解除し...
-
リンクをアップデートするしな...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
パワーポイントで参照ページを...
-
<IFRAME>でコンテンツ部分のみ...
-
エクセルVBAでマルチページの切...
-
VBAでマルチページのページ指定...
-
UserForm.showでマルチページ1...
-
リダイレクト前のURLをブックマ...
-
TEX ページ番号について
-
ページの自動ジャンプを止めるには
-
写真で、「クリックすると拡大...
-
アクティブレポートの、ページ...
-
マルチページの初期表示ページ...
-
HTMLでリンクが表示されないの...
-
地味なページはnofollowにする?
-
ホームページビルダー 画像 ...
-
latexの改ページの抑制
-
TOMCATを入れたPCのHTMLが別PC...
-
Latex. chapter間で改ページしない
-
ホームページを工事中にしたい。
-
Excel2007 VBA で2ページ目PDF
-
amebaブログのページ内ジャンプ...
おすすめ情報