- ベストアンサー
Ｆｉｒｅ Ｆｏｘでロールオーバが表示できない
こんばんは。質問させていただきます。 Ｆｉｒｅ Ｆｏｘで、以下のＪａｖａＳｃｒｉｐｔ <script type="text/javascript"> <!-- function expand(id) { if (id.style.display == "none") { id.style.display = "";} else {id.style.display = "none";} window.event.cancelBubble = true;} // --> </script> を＜ＨＥＡＤ＞内に含むＨＴＭＬファイルを表示させたところ、以下のタグ <span class="list" onclick="expand(a);" style="cursor:crosshair;">●●●</span> の●●●の部分をクリックしても、下に表示されるべきリンクが表示されません。Ｉｎｔｅｒｎｅｔ Ｅｘｐｌｏｒｅｒではちゃんと表示されるのですが・・・。 上手く表示させることはできますか？どなたかご回答よろしくお願い致します。
- jade3312
- お礼率71% (30/42)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
<html> <head> <script type="text/javascript"> <!-- function expand(e) { if ( (typeof e) == 'string' ) e=document.getElementById(e); if (e.style.display == "none") { e.style.display = "inline"; } else { e.style.display = "none"; } } // --> </script> </head> <body> <div class="list" onclick="expand('a');" style="cursor:crosshair;">●●●</div> <div id="a" style="display:none">○○○</div> <div class="list" onclick="expand('b');" style="cursor:crosshair;">■■■</div> <div id="b" style="display:none">□□□</div> </body> </html>
その他の回答 (3)
- auty
- ベストアンサー率58% (284/486)
・ displayとvisibilityの２つの例を考えてみました。 ・ IE のcancelBubbleは、複雑な構成になったときに必要となってきます。 以下のコードを参考にしてみてください。 ------------------------------------------------------------ <html> <head> <script type="text/javascript"> <!-- function expand(e) { if ( (typeof e) == 'string' ) e=document.getElementById(e); if (e.style.display == "none") { e.style.display = "inline"; } else { e.style.display = "none"; } //window.event.cancelBubble = true; } // --> </script> </head> <body> <button onclick="expand('list1')">inline/none</button> AAA<span id="list1" class="list" onclick="expand(this);" style="cursor: crosshair;">●●●</span>ZZZ </body> </html> ------------------------------------------------------------ <html> <head> <script type="text/javascript"> <!-- function expand(e) { if ( (typeof e) == 'string' ) e=document.getElementById(e); if (e.style.visibility == "hidden") { e.style.visibility = "visible"; } else { e.style.visibility = "hidden"; } window.event.cancelBubble = true; } // --> </script> </head> <body> <button onclick="expand('list1')">visible/hidden</button> AAA<span id="list1" class="list" onclick="expand(this);" style="cursor: crosshair;">●●●</span>ZZZ </body> </html>
お礼
お礼が遅くなってしまい、申し訳ありませんでした。 回答ありがとうございます。 早速試してみたのですが、すみません、こちらの質問の仕方が悪かったようで、うまく伝えられてなかったですね；； HTMLページとして表示してみると、最初は●●●しか表示されていなく、これをクリックすると、たとえば○○○などの文字が下に表示されるようにしたいのです。（再び●●●をクリックすると○○○が消える） ご回答くださったスクリプトは少し違いますが、でも、このスクリプトは初めて見るので、とても勉強になりました。活用させて頂きます！ どうもありがとうございました。
- yambejp
- ベストアンサー率51% (3827/7415)
<span class="list" onclick="expand(a);" style="cursor:crosshair;">●●●</span> <span id="a" style="display:none">test</span> ってなっているのですよね？ であれば、expand(a)というようにオブジェクトとしてaをわたしているようなので headの部分のscriptに window.onload=function(){ a=document.getElementById("a"); } というオブジェクトを宣言する行をたしてあげてください。 あとfirefoxではwindow.event.cancelBubble = trueは有効ではないと 思います。
お礼
お礼が遅くなってしまい、申し訳ありませんでした。 回答ありがとうございます。 scriptですが、<span id="a" style="display:none">test</span>の部分はありません。 <span class="list" onclick="expand(a);" style="cursor:crosshair;">●●●</span> の下に（たとえば）○○○などの文字があり、最初は●●●しか見えていない状態なのですが、これをクリックすると、その下に○○○が表示されるようにしたいのです。 教えてくださった行を足してみたところ、ちゃんと表示されました！ありがとうございます！ それで、もうひとつお聞きしたいのですが・・・。こちらの質問の仕方が悪かったのですが、実はdiv idが"a"だけでなく、"b","c"…と複数あるのです。つまり、 <span class="list" onclick="expand(a);" style="cursor:crosshair;">●●●</span> ○○○ （←クリックすると表示される <span class="list" onclick="expand(b);" style="cursor:crosshair;">■■■</span> □□□ （←同 …というふうに。 回答してくださった行では"a"で指定した部分（●●●の部分）しかクリックしても反応してくれませんでした。 window.onload=function(){ a=document.getElementById("★"); } の★の部分をb、cと変えてみたのですが、上手くいきませんでした…。 よろしければまた回答して頂けるとうれしいです。ありがとうございました。よろしくお願いいたします。
- steel_gray
- ベストアンサー率66% (1052/1578)
IE独自の曖昧表記がされているためです。 id.style.display ↓ document.getElementById(id).style.display で、試してみて。
お礼
御礼が遅くなってしまい、申し訳ありませんでした。 回答ありがとうございます。早速書き換えて実行してみたのですが、上手くいきませんでした…。IEには曖昧表記というものがあるのですね。初めて知りました。いろいろ調べてみようと思います。勉強になりました。 どうもありがとうございました。
お礼
こんばんは！お返事が遅くなってしまい申し訳ありません…。何度も回答してくださってありがとうございます！ 回答していただいたスクリプトを試しに実行してみたところ、思うとおりに作動しました！これでやっと思うようなレイアウトがFirefoxでも作れます！！ spanではなくdivで指定するのですね…。なるほど。とても勉強になりました。 どうもありがとうございました！