Javascript 关于鼠标盖<；李>；显示Div，但如果鼠标悬停在另一个li上，则隐藏Div并正确显示

我正试着和你们一起完成我正在制作的超大菜单，
在另一个问题中，当鼠标滑过

：

我试图实现的是，当我将鼠标悬停在一个li元素上时，我希望显示与其相关的div，但当我将鼠标悬停在上面时，它必须保持在那里（以便用户可以导航到它），而如果我将鼠标悬停在另一个li元素上，它将隐藏上一个元素并显示其相关的div。

我使用的jQuery:

$('#menu-left li').hover(
  function() {
    $("#" + $(this).data("menu")).show();
  },
  function() {
    $("#" + $(this).data("menu")).hide();
  }
);  

Html:


菜单












链接1
链接2
链接3
链接4
链接5
链接6
链接7
链接8
链接9
链接10
这就是你想要的吗？相反，将函数绑定到悬停事件，您需要将其绑定到鼠标悬停事件，这样，如果您将鼠标移出一个“li”，内容不会消失，只有在您输入另一个“li”时内容才会改变

您的代码中有一个小问题。当使用jQuery选择器$（“#menu left li”）时，您不应该忘记，这里您试图通过一次调用选择多个DOM li元素。因此，您必须循环浏览它们，以便能够将您想要的效果应用于其中的每一个。
如果理解了这一点，工作代码应如下所示：

$('#menu-left li').each(function(i,e){
    $(e).hover(
      function() {
        $("#" + $(this).data("menu")).show();
      },
      function() {
        $("#" + $(this).data("menu")).hide();
      }
   );
});

另外，不要忘记在默认情况下将div元素的“display”CSS属性预先设置为“none”。
就是这样！我试过用兄弟姐妹，但用错了。谢谢，没问题。很高兴能帮上忙。为什么不<代码>$（“#”+$（this.data（“菜单”））.show（）.sides（）.hide（）？
$('#menu-left li').on("mouseover", function() {
     $("#" + $(this).data("menu")).show();
     $("#" + $(this).data("menu")).siblings().hide();
});

$('#menu-left li').each(function(i,e){
    $(e).hover(
      function() {
        $("#" + $(this).data("menu")).show();
      },
      function() {
        $("#" + $(this).data("menu")).hide();
      }
   );
});