Mozillaでツリーメニュー内のリンクが動作しない
http://oshiete1.goo.ne.jp/qa3462499.html
こちらで質問した者ですが、その後原因がおぼろげながら掴めてきた=質問の趣旨が変わってきたのと、のんびりしてもいられなくなったので
こちらで再度質問させていただきます。
現在、フレームを使用したページを作成しています。上フレーム(top)と左下フレーム(menu)、右下フレーム(main)の構成です。
menuページでは以下のツリーメニュースクリプトを利用していますが、FireFoxなどのMozilla系ブラウザでは、下記ソースの<ul id="treemenu">以下のリンクが動作せず、ページを表示することができません。(IEでは動作します)
「スクリプトを削除する」もしくは「id="treemenu"を削除する」、または「リンクの上で右クリック→新しいタブ(ウィンドウ)で開く」ことで、Mozilla系ブラウザでもページが開くことは確認したのですが、どうしたらIE・Mozillaに関わらず、ツリーメニュー内できちんとリンクを機能させることができるのでしょうか?
////////////////////////以下ソース//////////////////////////
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
//メニューIDを列記
var has_event_id = new Array("treemenu");
//初期動作
if(document.all || document.getElementById){
window.onload = ice_menu_initialize;
}
//関数郡
function ice_menu_initialize(){
for (i=0;i<has_event_id.length;i++){
menu_lists = document.getElementById(has_event_id[i]).getElementsByTagName("li");
for (j=0;j<menu_lists.length;j++){
if(document.all && document.getElementById){
menu_lists.item(j).onclick = ice_menu;
}else if(document.getElementById){
menu_lists.item(j).addEventListener("click", ice_menu, false);
}
}
}
if(document.hasChildNodes){
var child_lists = document.getElementsByTagName("ul");
for (i=0;i<child_lists.length;i++){
if(child_lists.item(i).getAttribute("class")=="list-child" ||
child_lists.item(i).getAttribute("className")=="list-child"){
child_lists.item(i).style.display="none";
}
}
}
}
//メニュー開閉部
function ice_menu(evt){
var parent_tree_menu = this;
if(parent_tree_menu.getElementsByTagName('ul').item(0)){
var child_menu = parent_tree_menu.getElementsByTagName('ul');
if (child_menu.item(0).style.display == 'block'){
child_menu.item(0).style.display = 'none';
for(i=0;i<child_menu.length;i++){
if(child_menu.item(i).getAttribute("class") == "list-child" ||
child_menu.item(i).getAttribute("className") == "list-child"){
child_menu.item(i).style.display = 'none';
}
}
}else{
child_menu.item(0).style.display = 'block';
}
}
if(document.all && document.getElementById){
event.cancelBubble=true;
}else if(document.getElementById){
evt.stopPropagation();
evt.preventDefault();
}
}
</script>
<title>メインメニュー</title>
</head>
<body>
<ul>
<li>●メニュー1
<ul>
<li>▽<a href="test.html" target="main">サブメニュー1</a></li>
<li>▽<a href="test.html" target="main">サブメニュー2</a></li>
<li>▽<a href="test.html" target="main">サブメニュー3</a></li>
</ul>
</li>
</ul>
<ul>
<li><span id="top">●メニュー2</span>
<ul id="treemenu">
<li>▽<a href="test.html" target="main">サブメニュー1</a></li>
<li>▽<a href="test.html" target="main">サブメニュー2</a></li>
<li>▼<a href="#top">サブメニュー3</a>
<ul class="list-child">
<li>┣<a href="minitest.html" target="main">ミニメニュー1</a></li>
<li>┗ミニメニュー2</li>
</ul>
</li>
<li>▼<a href="#top">サブメニュー4</a>
<ul class="list-child">
<li>┣<a href="minitest.html" target="main">ミニメニュー1</a></li>
<li>┗ミニメニュー2</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
//////////////////////////ここまで////////////////////////////
※CSS用のクラスは紛らわしいので省いてあります。
お礼
なるほど!わかりました。ありがとうございます。