jqueryで複数のIDをまとめたいとき。

解決済

質問者：ststst
質問日時：2013/05/29 21:21
回答数：2件

今サイトを作成しています。
jqueryを使用していますがjsは弱いです。

http://www.tora-corp.com/co/miku2/test/slide.html

こちらのテストサイトですが、
マウスをメニュー上で移動した際に追尾するプログラムと
ABOUTのところをクリックしたときにドロップダウンする
プログラムとがidの箇所が重なるため、どのように表記すれば
良いか分からず大変困っております。

プロの方のご指導を是非頂きたく存じます。
どうぞよろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2013/06/06 18:33

きちんと作成されているプラグインであれば、同じ要素をトリガーにしても、処理内容が異なっていれば問題なく設置できるはずです。

処理内容が同じ要素に対して影響を与えるような場合は、その処理同士が干渉する可能性もありますが、ご提示のものの場合処理の対象要素が異なっていますので、その点では問題はないと想像します。（確認はしていません）

ただし、ご提示のまま設置した場合、プルダウンのサブメニューとマジックラインの位置が重なってしまうため、表示上マジックラインが隠れてしまう可能性があります。
あるいは、マジックラインを重なり順で上に置いた場合は、そこをマウスが通過する際にマウスアウトのイベントが発生することが予想されます。（サブメニューが閉じてしまう）
マジックラインの位置をメインメニューの上側に設置したり、メインメニューの裏側におくなどの工夫をすればよいだろうと思いますが、単に設置した場合にどのようになるかはわかりません。

一方で、それほど複雑な処理でもなさそうですので、ご自分で自作するという方法もあります。
（必要な機能だけに絞って実現するのなら、それほど複雑なスクリプトにはなりません。ライブラリ化しようとすると、少し複雑になるかも）

ごく単純化した例をご参考までに。
　* メニュー部は画像ではなくテキストにしてあります。
　* インデント部分の全角空白は半角などに

<!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. …
</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>

- 0
- 件

通報する

No.1

回答者： Taiyonoshizuku
回答日時：2013/05/30 10:16

＞ABOUTのところをクリックしたときにドロップダウンする

＞プログラムとがidの箇所が重なるため、どのように表記すれば
＞良いか分からず大変困っております。
ごめん、見てみたけど言ってることが良くわからなかった。

ＡＢＯＵＴのところはクリックしなくてもメニューが出てくるみたいだし、
idの箇所が重なるという表現も良くわからない。

あなたがどのような意図でサイトを作成しているかわからないから

・こうしたいんだけど、こうなってしまう

と説明が欲しい。

この回答への補足

文章足らずで申し訳ありません。
現在、２種類のメニューがある状態になっております。
(1)ホーム～マジックショップ
　└マウスにバーが追随する動き

(2)ABOUT～CONTACT
　└ABOUTへのマウスオーバーでドロップダウンする動き

これらは異なるjavascriptになるのですが
私の出口としては、(2)のメニューに(1)のマウスが追随する動きを
追加したいと考えております。

しかし、いずれのプログラムも
ソースを見ていくと、ul、liにかかるように
思われるため、両方のプログラムを(2)のメニューに反映するには
どうすればいいのか頓挫しているところでございます。

何卒よろしくお願いいたします。