cssでdisplay:noneを指定した時のプルダウンメニュー

解決済

質問者：die_freude
質問日時：2007/07/20 14:08
回答数：5件

こんにちは、JavaScriptでプルダウンメニューを作ろうとして
cssで予めdisplay:none;を指定したところ、
メニューがクリックしても開かなくなってしまいました。
html、css、JavaScriptの記述は以下の通りです。

html
---------------------------------------
<span onclick="PullDown('term1')">クリック</span>
<div id="term1">
<ul>
<li>***********</li>
<li>***********</li>
</ul>
</div>
-----------------------------

css
------------------------------
div#term1 {
display: none;
}
-------------------------------

JavaScript
-------------------------------
function PullDown(id){
if(document.getElementById(id).style.display == 'none')
document.getElementById(id).style.display='';
else
document.getElementById(id).style.display='none';
}
---------------------------------

cssの記述部分を無くすとちゃんと開いたり閉じたりと動作します。
また、
function Init(){
document.getElementById("term1").style.display="none";
}
とJavaScriptで書いて、
bodyタグの所で
<body onload="Init()">として呼び出してロード時に隠すようにするとちゃんと開閉してくれます。

cssでdisplay:none;と書くと動かなくなる理由と、
対策が分かる方居ましたら教えてください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： susie-t
回答日時：2007/07/20 14:28

CSSスタイルは、要素のstyleプロパティには反映されません。

なので、
if(document.getElementById(id).style.display == 'none')
のところで常に偽となってしまいます。適用されているスタイルを取得するためには、別の方法が必要です。

- 0
- 件

通報する

No.5

回答者： susie-t
回答日時：2007/07/20 16:03

''を設定すると「特に指定しない」ということになり、CSSの指定が適用されます。

DIV等のブロック要素(同一行に他の要素がない)なら'block'を指定してみてください。SPAN等のインライン要素(同一行に他の要素がある)なら'inline'です。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます、blockで出来ました！
この問題は何日も分からず悩んでいたので本当に嬉しいです。
参考にHPを載せて頂いたり、無知な自分にも分かりやすいように説明して頂き本当に感謝です。
重ね重ねですが、本当にありがとうございました！

通報する

お礼日時：2007/07/20 16:36

No.4

回答者： susie-t
回答日時：2007/07/20 14:40

＞an-goooさん

いえいえ＾＾

１の参考URLですが、見直してみたら我ながら分かりにくいですね・・・。currentStyleやgetComputedStyleで検索すればもっといいサイトがあると思うので探してみてください。

- 0
- 件

通報する

この回答へのお礼

susie-tさん、an-goooさん共々、御解答頂きありがとうございます。
onloadで初期化した場合はJavaScriptで"none"をセットしていたので
条件式でちゃんと=="none"と判別されていてたのですね。

しかしこの場合、値をセットするにはどうしたら良いのでしょうか？
function PullDown(id){
var root=document.getElementById(id);
var dis=document.defaultView.getComputedStyle(root,"").getPropertyValue("display");
if(dis=="none")
window.alert(dis);

とすると、確かに"none"が取得出来ているようなのですが、
前述の書き方で
root.style.display='';
としても当然かもしれませんが反映されません。

通報する

お礼日時：2007/07/20 15:45

No.3

回答者： an-gooo
回答日時：2007/07/20 14:35

＞susie-tさん

m(_ _)m 勉強になりましたｗ

- 0
- 件

通報する

No.2

回答者： an-gooo
回答日時：2007/07/20 14:30

cssのdisplay指定の初期値はinlineなので''ではなくinlineを指定してあげましょう。

それでも1回目は非表示→表示に変わりません。
それはdocument.getElementById(id).style.displayが''を返しているからのようです。
if(document.getElementById(id).style.display == 'none' ||document.getElementById(id).style.display == '')
document.getElementById(id).style.display='inline';
else
document.getElementById(id).style.display='none';
このようにすればうまく動くのではないでしょうか？

でも何故cssでdisplay:noneしてるにもかかわらず''が返ってくるのか・・・もうちょっと調べてみます・・・。