Question

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

单击按钮等事件的jquery代码写在一个中央且独立的js文件中。我尝试在导出按钮上附加mouseout / mouseleave事件，然后检查鼠标是否悬停在我的子菜单上。如果不是，则关闭子菜单。这适用于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: nested tags and hover() not working in IE

Hover doesn't work on nested ul in ie9

请提出解决方案。 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在识别没有内容的元素上的事件时出现问题。在您的定位内添加一个不间断的空间（例如＆amp; nbsp;）

Answer 3

感谢您的帮助。

我终于能够找到解决这个问题的方法。我写的最后一个.mouseout事件是：

.mouseout（function（e）{ / *绑定悬停方法首先处理鼠标和导出移动导出导出菜单然后隐藏导出菜单因此，当导出按钮中的鼠标悬停时，不会使其消失。 * / $ exportMenu.hover（function（e）{ $ exportMenu.show（）; }，function（e）{ $ exportMenu.hide（）; }）; $ exportMenu.hide（）; }） .appendTo（$（settings.handleSelector，this））;

Jquery：在IE8，IE9中，hover不能在ul里面嵌套li工作

3 个答案: