質問

オンクリックで文字が表示されるタグは、
文字が見えない段階でも場所をとるので悩んでいます。

オンクリックで文字が表示・非表示できるタグが紹介されているサイトはよくみかけるのですが、
文字が非表示の時に、折りたたんだ状態になっていてるタグが載っているサイトがありましたら教えてください。

通報する

回答 (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

visibilityでhiddenしたんじゃ、空間が開くのは当然です。見えないだけで
あるんだから。

見えないだけじゃなくて存在しないかのようにさせたいなら、visibilityじゃ
なくてdisplayでnoneにしましょう。ただし、document.all.item()というの
は方言なので、document.getElementById()を使うのがいいですよ。

>文字が見えない段階でも場所をとる
隠したほうのタグに 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>

このQ&Aは役に立ちましたか?2 件

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

新しく質問する

このQ&Aを見た人が検索しているワード


新しく質問する

このQ&Aを見た人がよく見るQ&A

このカテゴリの人気Q&Aランキング

毎日見よう!教えて!gooトゥディ

べんりQ&A特集