- ベストアンサー
cssでdisplay:noneを指定した時のプルダウンメニュー
こんにちは、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;と書くと動かなくなる理由と、 対策が分かる方居ましたら教えてください。
- die_freude
- お礼率84% (16/19)
- JavaScript
- 回答数5
- ありがとう数2
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
CSSスタイルは、要素のstyleプロパティには反映されません。なので、 if(document.getElementById(id).style.display == 'none') のところで常に偽となってしまいます。適用されているスタイルを取得するためには、別の方法が必要です。
その他の回答 (4)
- susie-t
- ベストアンサー率86% (37/43)
''を設定すると「特に指定しない」ということになり、CSSの指定が適用されます。DIV等のブロック要素(同一行に他の要素がない)なら'block'を指定してみてください。SPAN等のインライン要素(同一行に他の要素がある)なら'inline'です。
- susie-t
- ベストアンサー率86% (37/43)
＞an-goooさん いえいえ＾＾ １の参考URLですが、見直してみたら我ながら分かりにくいですね・・・。currentStyleやgetComputedStyleで検索すればもっといいサイトがあると思うので探してみてください。
お礼
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=''; としても当然かもしれませんが反映されません。
- an-gooo
- ベストアンサー率50% (6/12)
＞susie-tさん m(_ _)m 勉強になりましたｗ
- an-gooo
- ベストアンサー率50% (6/12)
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してるにもかかわらず''が返ってくるのか・・・もうちょっと調べてみます・・・。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
ありがとうございます、blockで出来ました！ この問題は何日も分からず悩んでいたので本当に嬉しいです。 参考にHPを載せて頂いたり、無知な自分にも分かりやすいように説明して頂き本当に感謝です。 重ね重ねですが、本当にありがとうございました！