• ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：展開メニューの修正）

展開メニューの修正

このQ&Aのポイント
  • 展開メニューの修正方法を教えてください。
  • 現在、展開メニューの挙動に問題があり、サブコンテンツのメニュー間を移動する際にちらつく問題が発生しています。
  • 閉じてしまうことなく、スムーズにサブコンテンツのメニュー間を移動する方法を教えてください。

質問者が選んだベストアンサー

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.5

すみません。イベントのIE対応間違えました。 if('undefined' !== typeof window.addEventListener) 　 window.addEventListener('load',func,false); 　else if ('undefined' !== typeof window.attachEvent) 　 window.attachEvent('onload',func); function func(){ 　var tenkai=document.querySelectorAll(".tenkai > a"); 　 for(var i=0;i<tenkai.length;i++){ 　　 tenkai[i].onmouseover=function(e){ 　　　var target = e?e.target:event.srcElement; 　　　var submenu=target.parentNode.querySelector("ul"); 　　　var submenus=document.querySelectorAll(".tenkai > ul"); 　　　for(var j=0;j<submenus.length;j++) 　　　 submenus[j].style.display=(submenus[j]==submenu)?"block":"none"; 　　 } 　 } } です。 tenkai[i].onmouseover=function(event){ 　　　var target = event.target || event.srcElement; はだめです。

picicate
質問者

お礼

遅くなってすいません。ありがとうございました。 結局別手段とることになったので実用はできなかったのですが助かりました。

すると、全ての回答が全文表示されます。

その他の回答 (4)

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.4

いまいちなんで、大幅に変えて見ました。 （id属性や引数は使いません。） <body> <div class="tenkai"> <a href="***" >コンテンツ名</a> <ul style="display:none;"> <li><a href="***">サブコンテンツ</a></li> <li><a href="***">サブコンテンツ</a></li> <li><a href="***">サブコンテンツ</a></li> <li><a href="****">サブコンテンツ</a></li> </ul> </div> <div class="tenkai"> <a href="***" >コンテンツ名</a> <ul style="display:none;"> <li><a href="***">サブコンテンツ</a></li> <li><a href="***">サブコンテンツ</a></li> <li><a href="***">サブコンテンツ</a></li> <li><a href="****">サブコンテンツ</a></li> </ul> </div> </body> ＳＣＲＩＰＴは↓だけ（全角空白インデントしてあります。） <script type="text/javascript"> if('undefined' !== typeof window.addEventListener) 　 window.addEventListener('load',func,false); 　else if ('undefined' !== typeof window.attachEvent) 　 window.attachEvent('onload',func); function func(){ 　var tenkai=document.querySelectorAll(".tenkai > a"); 　 for(var i=0;i<tenkai.length;i++){ 　　 tenkai[i].onmouseover=function(event){ 　　　var target = event.target || event.srcElement; 　　　var submenu=target.parentNode.querySelector("ul"); 　　　var submenus=document.querySelectorAll(".tenkai > ul"); 　　　for(var j=0;j<submenus.length;j++) 　　　 submenus[j].style.display=(submenus[j]==submenu)?"block":"none"; 　　 } 　 } } </script>

すると、全ての回答が全文表示されます。
  • zeff
  • ベストアンサー率69% (137/198)
回答No.3

もっとシンプルにこうしたらどうですか。 <script type="text/javascript"> <!-- function block(id, dsp){ if(document.getElementById){ document.getElementById(id).style.display = dsp; } } //--> </script> </head> <body> <div onmouseover="block('block1','block');" onmouseout="block('block1','none');"> <a href="***" >コンテンツ名</a> <ul id="block1" style="display: none;"> <li><a href="***">サブコンテンツ</a></li> <li><a href="***">サブコンテンツ</a></li> <li><a href="***">サブコンテンツ</a></li> <li><a href="****">サブコンテンツ</a></li> </ul> </div> <div onmouseover="block('block2','block');" onmouseout="block('block2','none');"> <a href="***" >コンテンツ名</a> <ul id="block2" style="display: none;"> <li><a href="***">サブコンテンツ</a></li> <li><a href="***">サブコンテンツ</a></li> <li><a href="***">サブコンテンツ</a></li> <li><a href="****">サブコンテンツ</a></li> </ul> </div> </body> </html>

picicate
質問者

お礼

遅くなってすいません。ありがとうございました。

すると、全ての回答が全文表示されます。
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.2

逆でした、いらないのは <div onMouseOver="block('block1')"> の方でした。 <div onMouseOut="block('block1')"><a href="***">コンテンツ名</a> <div id="block1" style="display: none;"> <ul> <li><a href="***">サブコンテンツ</a></li> <li><a href="***">サブコンテンツ</a></li> <li><a href="***">サブコンテンツ</a></li> <li><a href="****">サブコンテンツ</a></li> </ul></div>

picicate
質問者

補足

大変すいません、説明が足りませんでした。 上記直して頂いたものでも修正ができません。 といいますのはコンテンツ名がひとつではないので。 以下のような感じになります。 <div onMouseOut="block('block1')"><a href="***">コンテンツ名</a> <div id="block1" style="display: none;"> <ul> <li><a href="***">サブコンテンツ</a></li> <li><a href="***">サブコンテンツ</a></li> <li><a href="***">サブコンテンツ</a></li> <li><a href="****">サブコンテンツ</a></li> </ul></div> <div onMouseOut="block('block2')"><a href="***">コンテンツ名</a> <div id="block2" style="display: none;"> <ul> <li><a href="***">サブコンテンツ</a></li> <li><a href="***">サブコンテンツ</a></li> <li><a href="***">サブコンテンツ</a></li> <li><a href="****">サブコンテンツ</a></li> </ul></div> block1をポイントした場合の見た目はこんな感じです。 コンテンツ名 　サブコンテンツ 　サブコンテンツ 　サブコンテンツ コンテンツ名

すると、全ての回答が全文表示されます。
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

これいらないんじゃないかと、 　<div onMouseOut="block('block1')">

すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

注目のQ&A

カテゴリ

OKWAVE コラム

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

職業から探して質問する
質問する