CSSの指定でIEでエラー?
jQueryのバージョンは1.3.2。
jQueryでCSSを指定する記述方法には、以下の2種類がある。
css(name, value)
css(properties)
出くわしたのは、
上の記述方法ではIE8でエラーが出て、
下の記述方法にしたら回避できた、
という現象。
HTMLはこんな感じ:
<dl> <dt>質問1</dt> <dd>回答1</dd> <dt>質問2</dt> <dd>回答2</dd> </dl>
で、dd要素は非表示にしておいて、
dt要素のクリックで表示/非表示が切り替わる、
その際、
三角形の画像をdtの行頭画像に指定し、
閉じているときは右向き、
開いているときは下向き、にする、
という実装をjQueryでやってみた。
スクリプトはこんな感じ:
$(function(){ $('dt').toggle( function(){ $(this).css('list-style-image', ' url(/images/arrow_down.gif)'); // 下向きの三角形画像を指定 $(this).next().show('fast'); // 次の要素(dd)を表示 }, function(){ $(this).css('list-style-image', ' url(/images/arrow_right.gif)'); // 右向きの三角形画像を指定 $(this).next().hide('fast'); // 次の要素(dd)を非表示 } ): });
としたところ、
IE8でdt要素クリック時にエラーが発生する。
エラー箇所は、
jQueryのスクリプトファイルの中だった。
(12行目で引数が無効、とか。)
どの記述がひっかかるのか、
1行ずつ調べてみたところ、
$(this).css('list-style-image', ' url(/images/arrow_down.gif)'); // 下向きの三角形画像を指定
と
$(this).css('list-style-image', ' url(/images/arrow_right.gif)'); // 右向きの三角形画像を指定
をコメントアウトすると、エラーが出ないことがわかった。
別の箇所で、
css(properties)で複数のプロパティを記述していたところがあり、
そこは問題なく処理できているから、
以下のように記述を変更。
$(function(){ $('dt').toggle( function(){ $(this).css({ 'list-style-image': ' url(/images/arrow_down.gif)' // 下向きの三角形画像を指定 }); $(this).next().show('fast'); // 次の要素(dd)を表示 }, function(){ $(this).css({ 'list-style-image': ' url(/images/arrow_right.gif)' // 右向きの三角形画像を指定 }); $(this).next().hide('fast'); // 次の要素(dd)を非表示 } ): });
としたところ、
エラーが回避できた。
IE8は、
css(name, value)
には対応していなくて、
css(properties)
ならOK、ということでいいんだろうか。