- ベストアンサー
オンクリックで文字が表示されるタグ【折りたためる】を探しています
オンクリックで文字が表示されるタグは、 文字が見えない段階でも場所をとるので悩んでいます。 オンクリックで文字が表示・非表示できるタグが紹介されているサイトはよくみかけるのですが、 文字が非表示の時に、折りたたんだ状態になっていてるタグが載っているサイトがありましたら教えてください。
- CSS
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 ※余り詳しくはない者ですが^^; とりあえず、、、 「visibility='visible'」の部分を「display='block'」 「visibility='hidden'」の部分を「display='none'」 でいけるみたいですよ。 style="position:absolute;" でのサンプルをば。 ※↑単独で使用することのない属性になります。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <html> <head> <style type="text/css"> <!-- #moji2 {position:absolute;left:0.6em;top:2em; /* em:Firefoxではずれる */ background-color:pink; /* 見やすいように設定 */ z-index:1;} /*-値:Firefox非対応*/ --> </style> </head> <body> <!--質問者さまのコードここから--> <span onClick="document.all.item('moji2').style.visibility='visible'"> クリックする文字 </span> <div ID="moji2" onClick="document.all.item('moji2').style.visibility='hidden'" style="visibility:hidden;"> この文字をクリックすると消えます </div> <!--ここまで--> <br> てすと<!--動作確認の為に入れた文字列--> </body> </html> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ※IE7、Sleipnir1.66で動作確認済。 ※position指定をすると、全体のレイアウト指定の見直し（レイヤー指定？）が必要になってくると思います。 ※「z-index:1」はなくてOKなのですが、値を-1にしてみると違いがわかると思います。 （但し、firefoxは非対応のようです。） http://www.tohoho-web.com/css/reference.htm#Visual http://www.htmq.com/style/position.shtml
その他の回答 (2)
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
visibilityでhiddenしたんじゃ、空間が開くのは当然です。見えないだけで あるんだから。 見えないだけじゃなくて存在しないかのようにさせたいなら、visibilityじゃ なくてdisplayでnoneにしましょう。ただし、document.all.item()というの は方言なので、document.getElementById()を使うのがいいですよ。
- fake-tang
- ベストアンサー率24% (186/772)
>文字が見えない段階でも場所をとる 隠したほうのタグに style="position:absolute;" を入れてもダメ でしたか？ どうやって非表示にしているのかわかりませんが、文字列をタグで んで style="display:none;" とし、Javascrptで none と block を 入れ替えるのでもダメでしたか？ onmouseover ですが、ここで position と visibility をいじるタイプの 折りたたみナビゲーションを利用しています。 http://blog.3d6.moo.jp/
補足
回答ありがとうございます。 どこに上記のタグを入れれば良いのか教えていただけませんか。 タグは以下の通りです。 <span onClick="document.all.item('moji2').style.visibility='visible'" onClick="document.all.item('moji2').style.visibility='hidden'"> クリックする文字 </span> <div ID="moji2" onClick="document.all.item('moji2').style.visibility='hidden'" style="visibility:hidden;"> この文字をクリックすると消えます </div>