- ベストアンサー
展開メニューの修正
- 展開メニューの修正方法を教えてください。
- 現在、展開メニューの挙動に問題があり、サブコンテンツのメニュー間を移動する際にちらつく問題が発生しています。
- 閉じてしまうことなく、スムーズにサブコンテンツのメニュー間を移動する方法を教えてください。
- picicate
- お礼率58% (101/172)
- JavaScript
- 回答数5
- ありがとう数4
- みんなの回答 （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; はだめです。
その他の回答 (4)
- yyr446
- ベストアンサー率65% (870/1330)
いまいちなんで、大幅に変えて見ました。 （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)
もっとシンプルにこうしたらどうですか。 <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>
お礼
遅くなってすいません。ありがとうございました。
- yyr446
- ベストアンサー率65% (870/1330)
逆でした、いらないのは <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>
補足
大変すいません、説明が足りませんでした。 上記直して頂いたものでも修正ができません。 といいますのはコンテンツ名がひとつではないので。 以下のような感じになります。 <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)
これいらないんじゃないかと、 <div onMouseOut="block('block1')">
お礼
遅くなってすいません。ありがとうございました。 結局別手段とることになったので実用はできなかったのですが助かりました。