ベストアンサー

jquery select要素のdisplay:noneについて

2008/12/24 23:02

jqueryを使用して、要素の表示・非表示をさせたいのですが、下記、コードで問題が出ています。 <html> <head> </head> <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $(".dis").toggle( function(){ $("table.displayArea").attr("style","display:block"); }, function(){ $("table.displayArea").attr("style","display:none"); } ); }); </script> <body> <a href="#" class="dis">test</a> <table class="displayArea" style="display:none"> <tr> <td><select name=""> <option selected="selected">選択</option> </select></td> </tr> </table> </body> </html> aタグをクリックするとselectフォームがちゃんと表示されるんですが、再度クリックしてもselectフォームが非表示にされません。試しに、フォームでなくただのテキスト文字にしてみると、ちゃんと、表示・非表示がうまくいきます。その他のフォーム要素も試してみたのですが、問題ありませんでした。なのでselect要素だけちゃんと非表示されないようです。何が原因なのかお分かりになる方がいらっしゃいましたら、ご教授いただけると幸いです。

trfnc223
お礼率63% (111/174)

JavaScript
回答数3
ありがとう数2

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

yuu_x
ベストアンサー率52% (106/202)

2008/12/25 04:48 回答No.3

IE6 のバグみたいですね。 http://support.microsoft.com/kb/898138/ja IE7 では改善されているようです。提示コードの原因箇所 $("table.displayArea").attr("style","display:block"); $("table.displayArea").attr("style","display:none"); display を切り替えること自体がバグの原因になります。幸い jQuery の toggle ではその辺も考慮されているようですので、関数指定なしの toggle() で実行するようにすると良いと思います。コードは #1 の方が提示されていますので、そちらを参照してください。

質問者

お礼 2008/12/25 05:20

わざわざありがとうございました！！大変助かりました。

その他の回答 (2)

yuu_x
ベストアンサー率52% (106/202)

2008/12/25 01:06 回答No.2

無駄にかぶせてすみません。 JS 無効環境では何も表示されなくなるので style="display:none" のような書き方はなるべく避けたほうが良いでしょう。代替案としては、読み込み時に toggle を実行する。または、スタイルシートに .hidden{ display:none } などを JS で追加するなどでできると思います。

質問者

お礼 2008/12/25 02:24

ご回答ありがとうございます。大変申し訳ありません。いちばん肝心なことを書くのを忘れていました。 IE6だけ上記の現象が発生してしまいます。。。なぜでしょう？

chara0-m
ベストアンサー率50% (3/6)

2008/12/25 00:20 回答No.1

trfnc223の書いたソースで動作を確認したところ、問題なく表示・非表示できましたが・・。 jQueryは、ページ全体に指定されたタグを探しにいってしまうので、エレメントの指定は、なるべくアクセスしやすく指定した方が良いかもしれません。例えば、 <a href="#" class="dis">test</a> ↑エレメントの指定 $('a.dis') 今回に関しては、クラスだったのでなんともいえませんが。。。一つだけならidにした方が処理の速度も上がります。すいません。。余計なことを・・・問題の点なのですが少し、書き方を変えて同じ動作を参考までに <html> <head> </head> <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("a.dis").click(function(){ $('table.displayArea').toggle(); }) }); </script> <body> <a href="#" class="dis">test</a> <table class="displayArea" style="display:none"> <tr> <td><select name=""> <option selected="selected">選択</option> </select></td> </tr> </table> </body> </html>