JavaScriptを使わずに階層式(折りたたみ)メニューを表示させる事は可能でしょうか?
CGIで作成している日記ページの中の、ある1記事・1箇所だけに「文字をクリックすると続きが表示される」と言う仕掛けを置きたいと思っています。
そこで、階層式メニューを応用すればいいのでは、と考えました。
ただ、JavaScriptを使用するとなると、(私の知識では)ヘッダ部分にScriptを書き込まなければなりません。
CGIでページを作成しているため、ヘッダ部分に書かれたScriptでは、折りたたみメニューが必要ないページのヘッダにも入ってしまいます。
・Javascriptを使用せずに階層式メニューを表示させるには?
・HEAD部分にScriptを記述せずに(BODYへの記述のみで)階層式メニューは可能か?
・階層式メニューに似た動作をするものはあるか?
どなたかお分かりになる方、教えてください。
何卒宜しくお願いいたします。
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を使えば可能なんですね。
勘違いと思い込みで完全に盲点でした。
ですが、教えて頂いた物だとなぜかエラーがでてしまいました・・・・・・
他の方法でうまく行きましたので、今回はそちらを使ってみようと思います。
No.2
- 回答日時:
>Javascriptを使用せずに階層式メニューを表示させるには?
HTMLだけでは無理
他のスクリプト言語を用いるか、Flashなどのソフトを使うしかない。
>HEAD部分にScriptを記述せずに(BODYへの記述のみで)階層式メニューは可能か?
別に操作する関数をHEAD内に書かなくても良い
HEAD部分に書くのは関数定義などをひとところにまとめたほうが見やすいとかそういう問題。
個人的には
・スクリプトの必要なページとそうでないページでHEADを分かる
・全てのページに入れる
で済ませるとおもいます。
なぜ折りたたみメニューにするための数行程度のスクリプト(関数)の定義が使わないページにも入ってはいけないのかが不明です。
その点が分かればもっといい代替案などもでてくるのではないかとおもわれます
回答ありがとうございます。
全てのページに同じヘッダがはいってしまう仕様なので、分ける事ができないのです。
いわれてみれば全てのページにスクリプトが入っていても問題ない気がしてきましたが(^^;
何はともあれ、他の方に教えていたスクリプトでうまく行きましたので、そちらを使ってみたいと思います。
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>
こうすると クリックするごとに表示/非表示を切り替え
できます。
ありがとうございます。
表示と非表示を切り替えられるのが便利でしたし、一番わかりやすく、自分でアレンジしやすかったので、教えて頂いた物をちょこっと変えて使ってみたいと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- PHP 掲示板のセキュリティについてアドバイスお願い致します 1 2023/08/11 20:44
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- JavaScript [Java] Edgeでのアドレスバー非表示について 3 2022/04/20 17:51
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- HTML・CSS Dreamweaver のテンプレートでの相対パスの設定について 2 2023/06/13 17:28
- gooブログ ブログの記事を書きだしのみに表示したい 1 2022/06/25 19:11
- ドメイン・サーバー・クラウドサービス 自作サイトをサーバーにアップロードしたのですが… 2 2022/11/08 18:12
- その他(コンピューター・テクノロジー) 「プロトコル」の定義について 5 2023/04/16 13:13
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
エクセルVBAでマルチページの切...
-
ページの自動ジャンプを止めるには
-
アクセス元URLをばれないよ...
-
検索エンジンにインデックスさ...
-
ホームページを工事中にしたい。
-
UserForm.showでマルチページ1...
-
<IFRAME>でコンテンツ部分のみ...
-
Excel2007 VBA で2ページ目PDF
-
VBAでマルチページのページ指定...
-
ホームページビルダーで作成の...
-
ワードはページ数イコール枚数...
-
単語を少し変えると1位になるの...
-
パワーポイントで参照ページを...
-
PHPでポータルサイト作成
-
Googleにトップページではない...
-
indexページをタイマーセットで...
-
グーグルに、トップページ以外...
-
ログインしないとみることがで...
-
FC2でホムペ作成中、2ページ目...
-
検索順位が下がった
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
パワーポイントで参照ページを...
-
各ページの1番上の表示について
-
<IFRAME>でコンテンツ部分のみ...
-
VBAでマルチページのページ指定...
-
エクセルVBAでマルチページの切...
-
UserForm.showでマルチページ1...
-
検索エンジンにインデックスさ...
-
ページの自動ジャンプを止めるには
-
単語を少し変えると1位になるの...
-
アクセス解析。「直前に見てい...
-
検索順位が下がった
-
TEX ページ番号について
-
地味なページはnofollowにする?
-
vbsで開かれた別ウィンドウを制...
-
アクティブレポートの、ページ...
-
Excel2007 VBA で2ページ目PDF
-
リダイレクト前のURLをブックマ...
-
TOMCATを入れたPCのHTMLが別PC...
-
VBAでWEBサーバー上に保存され...
-
アクセス元URLをばれないよ...
おすすめ情報