2

JQuery を使用して、共有 ID を持つリンクの 1 つにカーソルを合わせると、同じ ID を持つ多くの div の 1 つを表示/非表示にしようとしています。

マークアップ スニペット

<div id='menuOption'>
<a href='#'><div id='cat_name'>$sub[cat_title]</div></a>
<div id='sub_menu' style='display:none;'>$itemlist</div></div>";

クエリ スニペット (私が試したこと):

$("#cat_name", this).hover(function(){
      $("#sub_menu", this).show();
});
$("#cat_name", this).mouseleave(function(){
      $("#sub_menu", this).hide();
});

これを理解するのに役立つ情報をいただければ幸いです。ありがとうございました。

4

2 に答える 2

3

HTML ID は一意である必要があります。代わりにクラスを使用して html 要素を選択してください。

例: http://jsfiddle.net/GPhsC/2/

HTML

<div class='menuOption'>
    <a href='#'><div class='cat_name'>$sub[cat_title]</div></a> 
    <div class='sub_menu' style='display:none;'>$itemlist</div>
</div>

jQuery

$(".cat_name").hover(function(){
    $(this).parent().parent().find(".sub_menu").show();
},
function() {
    $(this).parent().parent().find(".sub_menu").hide();
});
于 2012-04-06T00:41:03.860 に答える