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

解決済

質問者：trfnc223
質問日時：2008/12/24 23:02
回答数：3件

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要素だけちゃんと非表示されないようです。

何が原因なのかお分かりになる方がいらっしゃいましたら、
ご教授いただけると幸いです。

通報する

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

質問の本文を隠す

回答 (3件)

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

No.3ベストアンサー

回答者： yuu_x
回答日時：2008/12/25 04:48

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 の方が提示されていますので、そちらを参照してください。

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2008/12/25 05:20

No.2

回答者： yuu_x
回答日時：2008/12/25 01:06

無駄にかぶせてすみません。

JS 無効環境では何も表示されなくなるので
style="display:none"
のような書き方はなるべく避けたほうが良いでしょう。

代替案としては、読み込み時に toggle を実行する。または、スタイルシートに
.hidden{ display:none }
などを JS で追加するなどでできると思います。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。
大変申し訳ありません。

いちばん肝心なことを書くのを忘れていました。
IE6だけ上記の現象が発生してしまいます。。。

なぜでしょう？

通報する

お礼日時：2008/12/25 02:24

No.1

回答者： chara0-m
回答日時：2008/12/25 00:20

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>