Jquery:悬停在IE8、IE9中ul内的嵌套li上不起作用

Question

我有很多涉及小部件显示的网页（主要构建在highcharts jquery上）。通常，小部件有一个导出按钮。单击后，它会打开一个小菜单，用于各种导出选项。单击导出按钮可打开子菜单，但单击外部不会使其消失。：（

点击按钮等事件的jquery代码是在一个单独的js文件中编写的。我尝试在导出按钮上附加mouseout/mouseleve事件，然后检查鼠标是否悬停在我的子菜单上。如果不是，则关闭子菜单。这在Chrome中运行良好，但在IE中则不然。

代码是

var $exportMenu = $("<ul id='exportMenu'></ul>").appendTo($(settings.contentSelector, this));
DxOne.Export.initialiseExportMenuItems(thisWidgetSettings.exportOptions, $exportMenu);
$exportMenu.hide();
$exportMenu.menu();
$('<a href="#" class="export" title="Export">EXPORT</a>').click(function (e) {
    e.stopPropagation();
    e.preventDefault();
    $exportMenu.show().position({
        my: "left top",
        at: "left bottom",
        of: this
    });
    $exportMenu.mouseleave(function () {
        $exportMenu.hide();
    });
    return false;
})
    .mouseout(function (e) {
    if (!($exportMenu.is(":hover")) {
        $exportMenu.hide();
    }
    })
    .appendTo($(settings.handleSelector, this));

此外，我尝试了各种为ul添加白色背景色的解决方案，如以下链接中所述，但都是徒劳的。

jquery：嵌套标签和hover（）在IE 中不起作用

悬停不会'；不处理ie9 中的嵌套ul

请提出解决方案。TIA

Answer 1

在exportMenu尝试之前，您错过了一个$

.mouseout(function (e) {
  if (!($exportMenu.is(":visible")) { // and use :visible instead of :hover
    //--^--- place it before exportMenu
    $exportMenu.hide();
  }
})....

Answer 2

IE在识别没有内容的元素上的事件时遇到问题。在你的目标（例如&nbsp；）中添加一个不间断的空格

Answer 3

谢谢你们的帮助。

我终于想出了解决这个问题的办法。我写的最后一个.mouseout事件是：

.mouseout（函数（e）{/*绑定悬停方法，用于处理exportMenu的鼠标移入和移出移动，然后隐藏导出Menu这样，当鼠标悬停在exportMenu中时，从export按钮不会使其消失*/$exportMenu.hover（函数（e）{$exportMenu.show（）；}，函数（e）{$exportMenu.hide（）；})；$exportMenu.hide（）；}).appendTo（$（settings.handleSelector，this））；