IE6でだけのメニュー収納不具合

質問

お世話になっております。

Javascriptで、「見出しに対するメニュー収納の調整をしておりますが
見出しの文字だけではなく、見出しに指定した箇所全てをクリックして収納／表示が出来るようにしたいと思っています。

そこで以下の通り記載しましたが、IE6でだけ、文字のクリックのみでしか開かないとのお知らせが入りました。
IE6でも、見出しそのものをクリックすると開くようにするには、どのように調整すべきでしょうか。
もしご存知の方がおられましたら、是非ご教授ください！
宜しくお願い致します。

■HTML
<span class="list" onclick="expand(idhoge);" style="cursor:hand;"><h3>見出し見出し</h3></span>
<div id="idhoge" style="display:none">
<ul>
<li>しまってあるメニュー</il>
<li>しまってあるメニュー</li>
</ul>
</div>

■CSS
h3 {
background-image:url(../images/h3_hoge.gif);
background-repeat:repeat-x;
border:1px solid #CCCCCC;
color:#333333;
font-size:14px;
font-weight:bold;
margin:0 0 10px;
padding:5px;
}

■Javascript
<script type="text/javascript">
<!--
function expand(id) {
if (id.style.display == "none") {
id.style.display = "";}
else {id.style.display = "none";}
window.event.cancelBubble = true;}
// -->
</script>

HTMLの<span class>を<div class＞に変えてもダメでした。。

回答No.3

yuu_x

<script type="text/javascript">
/*@cc_on@*/

function getCStyle( e, s ) {
return e.nodeType == 1 ? /*@if(1) e.currentStyle[ s ] @else@*/ document.defaultView.getComputedStyle( e, null )[ s ] /*@end@*/ : null;
}
function clickHandler( evt ) {
var t = evt./*@if(1) srcElement @else@*/ target /*@end@*/;

//if( t.nodeName == 'H3' ) ) {
if( /(^|\s)trigger(\s|$)/.test( t.className ) ) {
while( ( t = t.nextSibling ) && !/(block|none)/i.test( getCStyle( t, 'display' ) ) ) { ; }
//while( ( t = t.nextSibling ) && t.nodeName == 'UL' ) { ; };
//document.evaluate( ... など。

if( t.nodeType == 1 ) t.style.display = RegExp.$1 == 'none' ? 'block' : 'none';
}
}

document.write(
'\u003Cstyle type="text/css">'
+ '.pullDown ul { display : none; }'
+ '\u003C/style>'
);
</script>

<ul onclick="clickHandler( event );" class="pullDown">
<li><h3 class="trigger">見出し1</h3>
<ul>
<li>しまってあるメニュー</li>
<li>しまってあるメニュー</li>
</ul>
</li>
<li><h3 class="trigger">見出し2</h3>
<ul>
<li>しまってあるメニュー</li>
<li>しまってあるメニュー</li>
</ul>
</li>
</ul>

http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
http://validator.w3.org/
https://developer.mozilla.org/en/DOM/event.cancelBubble

#cancelBubble : 伝播を制御しているわけでもなさそうなので、、、（略）

お礼

ご回答をありがとうございます。
ちょっと気になったのですが、h3にスタイル指定を元々してあったため
class="trigger"にてかこってしまうと、スタイルが無視されてしまいました。

今回は見出しを文字ではなく画像に変えて対応致しました。
色々とありがとうございました。
非常に勉強になりました！

回答No.2

yambejp

expandの引数をidでうけてますが、予約語に引っかかる可能性も。
h3をspanで囲んだりいまいち美しくないですね・・・
idでオブジェクトを拾うのは汎用性もないし、以下のように変更してみては？

<style>
.list h3 {
background-image:url(1.jpg);
background-repeat:repeat-x;
border:1px solid #CCCCCC;
color:#333333;
font-size:14px;
font-weight:bold;
margin:0 0 10px;
padding:5px;
cursor:hand;
}
.list div {
display:none;
}
.list div.view {
display:block;
}
</style>
<script type="text/javascript">
function expand(obj) {
var n=obj.nextSibling;
while(n){
if(n.nodeName=="DIV") break;
n=n.nextSibling;
}
n.className=n.className!="view"?"view":"";
}
</script>

<div class="list">
<h3 onclick="expand(this);">見出し1</h3>
<div>
<ul>
<li>しまってあるメニュー</il>
<li>しまってあるメニュー</li>
</ul>
</div>
</div>
<div class="list">
<h3 onclick="expand(this);">見出し2</h3>
<div>
<ul>
<li>しまってあるメニュー</il>
<li>しまってあるメニュー</li>
</ul>
</div>
</div>

お礼

ご回答お寄せ頂きましてありがとうございます。
美しくない書き方、反省しております。勉強致します！！
さて、教えて頂いた方法で早速挑戦してみたのですが
メニューが開きっぱなしになってしまいました…。Firefoxでも同様、開いた状態で表示されました。

見出し部分を画像に変える事も検討してみます。
ありがとうございました。色々勉強になります。
今後ともよろしくお願い致します。

回答No.1

fujillin

IE6.0.28ですが、再現しませんね。
空エリアのクリックでも表示/非表示が切り替わります。

id名称idhogeをそのままオブジェクトとして使用しているのが、気にはなりますが…

お礼

ご回答をお寄せ頂きありがとうございます。
そうですか…。
難しいですね。もうちょっと調べてみます。
ありがとうございました！