javascript - 如何使用 jquery 显示具有相同 id 的众多 div 之一？

Question

我正在尝试使用 JQuery 在悬停具有共享 ID 的链接之一时显示/隐藏具有相同 ID 的众多 div 之一。

标记片段

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

Answer 2

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

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

对于你的例子

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