JQuery多个ID以隐藏1个div

我正在做一个私人项目，只是有点麻烦

我正在尝试制作一个简单的悬停菜单

其思想是，当用户将鼠标悬停在列表元素上时，它会显示一个div，当用户将鼠标移到div上或最初悬停在div上的元素消失时

比如说

当您将鼠标悬停在其中一个按钮上时，将显示一个div

<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>

<div id="link1div"><div id="link1innercontent"></div></div>
<div id="link2div"></div>

链接1
链接2

现在，当您将鼠标悬停在li上方时，div将出现，当您将鼠标移出div时，div将消失

我想做的是，当你用鼠标移动li或div时，div消失了。我遇到了麻烦，因为当我尝试这样做时，两个div都消失了

我的代码如下：

<div id="menu">
<ul>
                        <li id="link_1">Link 1</li>
                        <li id="link_2">Link 2</li>
                    </ul>
</div>

 <div id="link_1"><div id="link1innercontent"></div></div>
    <div id="link_2"></div>

$("#menu li").hover(function(){
var name1 = $(this).attr('id'); //ignore these, they are for selecting appropriate ids
var name = name1.split('_'); //ignore these, they are for selecting appropriate ids
openMenu(name[1]);
$("#m_"+name[1]).mouseleave(function(){ // I have tried $("#m_"+name[1]+",#"+name1) but it 
closeMenu(name[1]);                     // hides the div before you can access it.
});
});


function openMenu(name){
$("#m_"+name).slideDown();  
}

function closeMenu(name){
$("#m_"+name).slideUp();    
} 

链接1
链接2

$（“#菜单li”）.hover（函数（）{
var name1=$（this）.attr（'id'）；//忽略这些，它们用于选择适当的id
var name=name1.split（“”“）；//忽略这些，它们用于选择适当的ID
openMenu（名称[1]）；
$（“#m#”+name[1]）.mouseleave（function（）{//我尝试过$（“#m#”+name[1]+，#“+name1），但它
closeMenu（名称[1]）；//在访问div之前隐藏该div。
});
});
函数openMenu（名称）{
$（“#m#”+名称）.slideDown（）；
}
功能关闭菜单（名称）{
$（“#m#”+名称）.slideUp（）；
} 

---

非常感谢您的帮助。

您不能将一个ID用于两个元素，您应该使用类：

<div id="menu">
<ul>
<li class="link_1">Link 1</li>
<li class="link_2">Link 2</li>
</ul>
</div>

<div class="link_1"><div id="link1innercontent"></div></div>
<div class="link_2"></div>

$("#menu li").hover(function(){
  var name1 = $(this).attr('class'); 
  var name = name1.split('_'); //ignore these, they are for selecting appropriate ids
  $('div.' + name[1]).slideDown() 
  }, function() {
    $('div.' + name[1]).slideup()
 });

链接1
链接2

$（“#菜单li”）.hover（函数（）{
var name1=$（this.attr（'class'）；
var name=name1.split（“”“）；//忽略这些，它们用于选择适当的ID
$（'div.+name[1]）.slideDown（）
}，函数（）{
$（'div.+名称[1]）.slideup（）
});

这里有奇怪的JavaScript。：）下面是我的想法：当鼠标离开

div

或

li

时，您希望

div

消失吗？因此，由于您不能同时完成这两项操作（将鼠标从一个移动到另一个将触发

mouseleave

事件），因此您必须执行以下操作：

设置超时变量

var t=setTimeout（…）

当鼠标离开

div

或

li

（例如500毫秒）时。在此之后，隐藏div（在

setTimeout

handler中执行此操作）

---

现在，当您将鼠标移到

div

或

li

上时，清除此超时：

clearTimeout（t）。我想大多数人都是这样做的（还有其他的吗？）
谢谢你的回复，奇怪的是，我理解你的意思，但我的问题主要是在菜单链接之间切换。由于mouseleave在我进入和离开div时起作用，只是在不同菜单选项之间切换时，发生的是前一个div不会消失，因为mouseleave在div上，而不是在li上，并且我没有输入要触发mouseleave事件的div，但如果我在li上放一个mouseleve或mouseout，当我把li上的mouseleve或mouseout放在li上时，div就会消失。