jQuery菜单下拉列表气泡

所以我有一个菜单，当任何项目悬停在上面时，它需要显示一个框。该框是一个包含标题文本和图像的div，下面是我的代码。我正在尝试编写一个函数，可以在项目悬停时切换不同的框

例如，将鼠标悬停在“按钮1”上，它应该切换“选项卡1”，将鼠标悬停在“按钮3”上，切换“选项卡3”

类下拉列表内容具有

display:none

以隐藏所有div

请帮忙，谢谢

$（'#辅助菜单li'）。悬停（函数（）{
var arr=['1'，'2'，'3'，'4'，'5']；
$。每个（$（此）、函数（索引、值）{
//我不知道在这里插入什么
$（'#tab'+[arr]）.toggle（）；
});
});
$（'#二级菜单li'）.onmouseout（函数（）{
$（'#tab'+[arr]）.hide（）；
});



按钮1
按钮2
按钮3
按钮4
按钮5

一些标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。非nisl-eget-luctus中的粗溶液。康塞特图尔奥奇万岁

标题二
Lorem ipsum dolor sit amet，是一位杰出的献身者。非nisl-eget-luctus中的粗溶液。康塞特图尔奥奇万岁

标题三
Lorem ipsum dolor sit amet，是一位杰出的献身者。非nisl-eget-luctus中的粗溶液。康塞特图尔奥奇万岁

标题四
Lorem ipsum dolor sit amet，是一位杰出的献身者。非nisl-eget-luctus中的粗溶液。康塞特图尔奥奇万岁

标题五
Lorem ipsum dolor sit amet，是一位杰出的献身者。非nisl-eget-luctus中的粗溶液。康塞特图尔奥奇万岁


只需对代码进行一点重构，并使用鼠标悬停显示/隐藏即可。还使用数据属性将li按钮链接到适当的div框


//***********
//一种方法是获取具有下拉内容的所有类的计数，并通过附加数据属性进行循环。
// ***********
函数AddMe（）{
var i=1；//计数器
//循环遍历每个.dropdown内容类并追加
//具有递增数据id的li
$（“.dropdown content”）.each（函数（）{
//内容在这里
$（“#二级菜单ul”）.append（“
按钮“+i+”
”；
i++；//递增计数器
});
}
// ***********
//启动功能
// ***********
AddMe（）；
// ***********
//事件
// ***********
$（'#二级菜单li'）。打开（“鼠标悬停”，函数（）{
var id=$（this.attr（“数据id”）；
$（“#选项卡”+id）.show（）；
});
$（'#二级菜单li'）。打开（“鼠标出”，函数（）{
var id=$（this.attr（“数据id”）；
$（“#选项卡”+id）.hide（）；
});
。下拉式内容{
显示：无；
}
李：悬停{
光标：指针；
背景：天蓝色；
颜色：白色；
}



一些标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。非nisl-eget-luctus中的粗溶液。康塞特图尔奥奇万岁

标题二
Lorem ipsum dolor sit amet，是一位杰出的献身者。非nisl-eget-luctus中的粗溶液。康塞特图尔奥奇万岁

标题三
Lorem ipsum dolor sit amet，是一位杰出的献身者。非nisl-eget-luctus中的粗溶液。康塞特图尔奥奇万岁

标题四
Lorem ipsum dolor sit amet，是一位杰出的献身者。非nisl-eget-luctus中的粗溶液。康塞特图尔奥奇万岁

标题五
Lorem ipsum dolor sit amet，是一位杰出的献身者。非nisl-eget-luctus中的粗溶液。康塞特图尔奥奇万岁

给你一个解决方案


$（'#辅助菜单li'）.mouseenter（函数（）{
$（'#'+$（this.data（'tab'））.slideDown（）；
}).mouseleave（函数（）{
$（'#'+$（this.data（'tab'））.slideUp（）；
});
。下拉式内容{
显示：无；
}


按钮1
按钮2
按钮3
按钮4
按钮5

标题一
Lorem ipsum dolor sit amet，是一位杰出的献身者。非nisl-eget-luctus中的粗溶液。康塞特图尔奥奇万岁

标题二
Lorem ipsum dolor sit amet，是一位杰出的献身者。非nisl-eget-luctus中的粗溶液。康塞特图尔奥奇万岁

标题三
Lorem ipsum dolor sit amet，是一位杰出的献身者。非nisl-eget-luctus中的粗溶液。康塞特图尔奥奇万岁

标题四
Lorem ipsum dolor sit amet，是一位杰出的献身者。非nisl-eget-luctus中的粗溶液。康塞特图尔奥奇万岁

标题五
Lorem ipsum dolor sit amet，是一位杰出的献身者。非nisl-eget-luctus中的粗溶液。康塞特图尔奥奇万岁

看起来不错，在这两种情况下都有效，但我无法将“数据id”添加到“li”中，因为我的菜单是从PHP中提取的。在函数运行之前，如何通过“#二级菜单”中的每个“li”添加“数据id”或“数据选项卡”？有很多方法。一种方法是通过在下拉内容的所有实例上循环并使用简单计数器添加数据id来添加li按钮。这样你就不需要写li按钮的所有副本。看起来不错，在两种情况下都能工作，尽管我不能将“数据id”添加到“li”中，因为我的菜单是从PHP中提取的。如何在函数运行之前通过“#二级菜单”中的每个“li”添加“数据id”或“数据选项卡”？@BoyanStojakovic这里是更新后的解决方案。无
数据选项卡
或
dat