onclickを使わずにイベント処理をする方法について。

onclickを使わずにイベント処理をする方法について。

【<h1>をクリックすると同じ<div>を親に持つ<p>が表示/非表示】
されるようにしたいのですが、IEで動作せず、困っています。

下記は現在のコードです。
--------------------------------------------------------------------------
var divs = document.getElementsByTagName('div');

var listener = function(ev){
if(/(?:^|\s)text(?:$|\s)/.test(ev.target.className)){

var next = ev.target.nextSibling.nextSibling;
if(next.style.display != "none"){
next.style.display = "none";
}else{
next.style.removeProperty("display");
}
}
};
if (document.addEventListener) {
document.addEventListener('click', listener, false);// IE以外
} else {
document.attachEvent("onclick", listener);// IE
}
--------------------------------------------------------------------------
<div>
<h1 class="text">見出し</h1>
<p>本文</p>
</div>
<div>
<h1 class="text">見出し</h1>
<p>本文</p>
</div>
<div>
<h1 class="text">見出し</h1>
<p>本文</p>
</div>
--------------------------------------------------------------------------

ev.target.classNameあたりが怪しく…
window.event.srcElement.classNameに変更してみましたが動作しませんでした。

html側の制約があり、出来れば上記のようなclassのみのhtmlで、
更にわがままを言うと

<div class="text">
<h1>見出し</h1>
<p>本文</p>
</div>

のようにdivにclassを振った形で実現したいです。

なお、現在のコードは複数のサンプルコードを参考に試行錯誤したものですので
不要なコードが混ざっているかもしれません。

動作確認環境はIE7、IE8、Firefox、Safari（Windows）です。

納期が迫り大変困っています。アドバイスを頂けますと嬉しいです。
宜しくお願い致します。

No.1 回答者： yuu_x 回答日時： 2010/05/30 06:15

var listener = function(ev){

var t = ev./*@if(1)srcElement@else@*/target/*@end@*/;

if (t.tagName === 'H1' && t.parentNode.tagName === 'DIV' && /(?:^|\s)text(?:$|\s)/.test(t.parentNode.className)) {
while (t && t.nodeType !== 1) t = t.nextSibling;
t && (t.style.display = t.style.display === 'none' ? 'block' : 'none');
}
};

この回答へのお礼

丁寧な回答ありがとうございます！
現在試行錯誤中です…。解決しましたら、改めてご回答させていただきます。

お礼日時：2010/05/30 18:41