人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Javascriptで、アコーディオン風のことをしたいと考えています。

そこで下記のコードを実行するとFirefoxだと、意図どおりクラス名の操作ができます。しかしIE系の場合thisの値がうまく渡せていないためエラーが起きてしまいます。

IEでも、うまくthisを渡す方法はありまでしょうか。

<html>
<body>

<ul class="test">
<li class="class_visible">リスト<span>追加領域</span></li>
<li>リスト<span>追加領域</span></li>
<li>リスト<span>追加領域</span></li>
</ul>


<script type="text/javascript" src="http://www.prototypejs.org/assets/2007/11/6/prototype.js"></script>
<script type="text/javascript"><!--

$$("ul.test li").invoke(
'observe',
'mouseover',
function (){
if( ! this.hasClassName("class_visible") ){
$A(this.parentNode.getElementsByTagName("li")).each( function(e){
e.removeClassName("class_visible");
});
}
this.addClassName("class_visible");
}
);

--></script>

<style type="text/css">
ul.test li span{
display: none;
}
ul.test li.class_visible span{
display: block;
}
</style>


</body>
</html>

●質問者: flar
●カテゴリ:ウェブ制作
✍キーワード:firefox IE JavaScript test UL
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● openseed
●60ポイント ベストアンサー

こんな感じでいかがでしょう。



var page = this;
$$("ul.test li").invoke(
'observe',
'mouseover',
function (event){
var elem = event.srcElement ? event.srcElement : this;

if( ! elem.hasClassName("class_visible") ){
$A(elem.parentNode.getElementsByTagName("li")).each( function(e){
e.removeClassName("class_visible");
});
}
elem.addClassName("class_visible");
});

質問とは異なりますが、以下のサイトが参考になるかもしれません。

http://www.google.co.jp/search?sourceid=navclient&hl=ja&ie=UTF-8...

http://www.google.co.jp/search?sourceid=navclient&hl=ja&ie=UTF-8...

◎質問者からの返答

ご回答ありがとうございます。なるほど。やはり回避策としては、eventが起きた要素を取得するという形になりますでしょうか。

私もひとまず、実装時は下記で回避しました。

var elem = Event.findElement(event, "li");

ご案内いただいたevent.srcElement、またはprototype.js的に言えば、Event.Element(event)だけですと、マウスのフォーカス位置によっては、liに内包されているspan等の要素がelemに返却されてしまうので、Event.findElementを使ってliまでさかのぼっています。


やはりthisの使い方、考え方としては、こういったイベントまわりでは使わずに、イベントが起きた要素を取得するというやり方が適切になるんでしょうか?

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ