如何使用jquery显示具有相同ID的多个div中的一个？

Question

我想使用JQuery显示/隐藏具有相同ID的多个div中的一个具有共享ID的链接之一的悬停。

标记片段

<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(); 
}); 

我明白任何信息，可以帮助我弄清楚了这一点。谢谢。

Answer 1

HTML IDS必须是唯一的。改为使用类来选择html元素。

实例：使用类为我的元素，而不是ID和仍然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(); 
}); 

Answer 2

具有相同ID属性的多个元素是不正确的标记。

您应该通过它们的class属性来标识元素组。

对于示例

<div class='menuOption'> <a href='#'><div class='cat_name'>$sub[cat_title]</div></a> 
<div class='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(); 
});