- ベストアンサー
jqueryで複数のIDをまとめたいとき。
今サイトを作成しています。 jqueryを使用していますがjsは弱いです。 http://www.tora-corp.com/co/miku2/test/slide.html こちらのテストサイトですが、 マウスをメニュー上で移動した際に追尾するプログラムと ABOUTのところをクリックしたときにドロップダウンする プログラムとがidの箇所が重なるため、どのように表記すれば 良いか分からず大変困っております。 プロの方のご指導を是非頂きたく存じます。 どうぞよろしくお願いいたします。
- ststst
- お礼率50% (20/40)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
きちんと作成されているプラグインであれば、同じ要素をトリガーにしても、処理内容が異なっていれば問題なく設置できるはずです。 処理内容が同じ要素に対して影響を与えるような場合は、その処理同士が干渉する可能性もありますが、ご提示のものの場合処理の対象要素が異なっていますので、その点では問題はないと想像します。（確認はしていません） ただし、ご提示のまま設置した場合、プルダウンのサブメニューとマジックラインの位置が重なってしまうため、表示上マジックラインが隠れてしまう可能性があります。 あるいは、マジックラインを重なり順で上に置いた場合は、そこをマウスが通過する際にマウスアウトのイベントが発生することが予想されます。（サブメニューが閉じてしまう） マジックラインの位置をメインメニューの上側に設置したり、メインメニューの裏側におくなどの工夫をすればよいだろうと思いますが、単に設置した場合にどのようになるかはわかりません。 一方で、それほど複雑な処理でもなさそうですので、ご自分で自作するという方法もあります。 （必要な機能だけに絞って実現するのなら、それほど複雑なスクリプトにはなりません。ライブラリ化しようとすると、少し複雑になるかも） ごく単純化した例をご参考までに。 * メニュー部は画像ではなくテキストにしてあります。 * インデント部分の全角空白は半角などに <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> body{ background-color:#000; } div.line{ height:2px; overflow:hidden; background-color:#fff; color:red;} #nav, #nav ul, #nav li{ list-style-type:none; margin:0; padding:0; } #nav{ font-size:20px; font-weight:bold; color:#fff; height:45px; width:840px; margin:0 auto; } #nav a{ text-decoration:none; } #nav a:link, #nav a:visited{ color:#fff; } #nav li.main{ position:relative; float:left; } #nav li.main a{ display:block; padding:12px 20px; } #nav ul{ position:absolute; left:0; top:44px; background-color:#555; } #nav ul li{ border-top:1px solid #fff; } #nav ul li a{ width:150px; padding:16px 20px; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> </head> <body> <div class="line"> </div> <ul id="nav"> <li><a href="#">About</a> <ul> <li><a href="#">Concept</a></li> <li><a href="#">Aburi brand</a></li> <li><a href="#">Philosophy</a></li> <li><a href="#">Sustainability</a></li> </ul> </li> <li><a href="#">Menu</a> <ul> <li><a href="#">Menu-1</a></li> <li><a href="#">Menu-2</a></li> <li><a href="#">Menu-3</a></li> </ul> </li><li><a href="#">Beverrages</a> <ul> <li><a href="#">Beverrages-1</a></li> <li><a href="#">Beverrages-2</a></li> <li><a href="#">Beverrages-3</a></li> </ul> </li> </li><li><a href="#">Private Dining</a></li> </li><li><a href="#">Event</a></li> </li><li><a href="#">Book now</a></li> </li><li><a href="#">Contact</a></li> </ul> <div style="background-color:#666; height:400px; clear:both;">記事部分</div> <script type="text/javascript"> (function(){ // 初期セットアップ $("#nav>li").addClass("main").find("ul").css({opacity: 0.7, display: "none"}) .find("li:first-child").css("border", 0); var line = $("<div></div>"); line.appendTo(line.clone().css({position:"relative", top:-4, zIndex:-10})) .parent().insertAfter($("#nav")); line.css({height:2, position:"absolute", backgroundColor:"#f00", overflow:"hidden"}); // メニューのホバーアクション $("#nav>li").hover(function(){ var t = $(this); $("ul", t).slideDown(); line.css("width", t.width()).stop(1, 1).animate({left: t.offset().left}); }, function(){ $("ul", this).stop(1, 1).slideUp(); }); // サブメニューのホバーアクション $("#nav ul li a").hover(function(){ $(this).css("backgroundColor", "#888"); }, function(){ $(this).css("backgroundColor", "#555"); }); })(); </script> </body> </html>
その他の回答 (1)
- Taiyonoshizuku
- ベストアンサー率37% (183/489)
＞ABOUTのところをクリックしたときにドロップダウンする ＞プログラムとがidの箇所が重なるため、どのように表記すれば ＞良いか分からず大変困っております。 ごめん、見てみたけど言ってることが良くわからなかった。 ＡＢＯＵＴのところはクリックしなくてもメニューが出てくるみたいだし、 idの箇所が重なるという表現も良くわからない。 あなたがどのような意図でサイトを作成しているかわからないから ・こうしたいんだけど、こうなってしまう と説明が欲しい。
補足
文章足らずで申し訳ありません。 現在、２種類のメニューがある状態になっております。 (1)ホーム～マジックショップ └マウスにバーが追随する動き (2)ABOUT～CONTACT └ABOUTへのマウスオーバーでドロップダウンする動き これらは異なるjavascriptになるのですが 私の出口としては、(2)のメニューに(1)のマウスが追随する動きを 追加したいと考えております。 しかし、いずれのプログラムも ソースを見ていくと、ul、liにかかるように 思われるため、両方のプログラムを(2)のメニューに反映するには どうすればいいのか頓挫しているところでございます。 何卒よろしくお願いいたします。