调整屏幕大小或更改屏幕方向后显示和隐藏弹出菜单的意外行为答案

【问题标题】：Unexpected behavior of displaying and hiding a popup menu after resizing a screen or changing screen orientation调整屏幕大小或更改屏幕方向后显示和隐藏弹出菜单的意外行为
【发布时间】：2014-07-16 04:25:17
【问题描述】：

我正在开发一个允许我打开和关闭弹出内容的菜单。菜单可以通过按下按钮打开，通过再次单击按钮或单击弹出内容容器以外的任何其他位置来关闭。

当我使用我的代码时，我遇到了一个奇怪的问题，在调整窗口大小或更改屏幕方向（例如在平板电脑上）后，然后单击菜单按钮，弹出窗口不会保持打开状态。它会在打开后立即打开和隐藏。

我无法在 jsFiddle 中复制此错误，但我做了一个示例，我使用相同的代码。

为什么我在演示页面上遇到此问题？如何避免？我的代码是否有一些我不知道的限制？

这是一个在每个按钮的点击处理程序上运行的函数。

function mainMenuFunction(eid) {
    var num = $(eid).attr('id').substr($(eid).attr('id').length - 1);
    var elem = $("#menu-content-" + num);
    var parent = $("#menu-item-" + num);
    var p = parent.position();
    var o = parent.offset();

    if (elem.css("display") == "none") {
        elem.slideDown();
    } else {
        elem.slideUp();
    }

    $(document).click(function (e) {
        // position of the menu item
        var hstart = o.left;
        var hend = o.left + parent.width();
        var vstart = o.top;
        var vend = o.top + parent.height();

        // position of the menu container
        var chstart = elem.offset().left;
        var chend = elem.offset().left + elem.width();
        var cvstart = elem.offset().top;
        var cvend = elem.offset().top + elem.height();

        if (!(((e.clientX >= hstart) && (e.clientX <= hend)) && ((e.clientY >= vstart) && (e.clientY <= vend)))) {
            if (!(((e.clientX >= chstart) && (e.clientX <= chend)) && ((e.clientY >= cvstart) && (e.clientY <= cvend)))) {
                elem.slideUp();
            }
        }
    });
}

在 jsFiddle 上，此代码用于在用户调整页面大小时关闭所有菜单。所以我的手机和电脑菜单在切换屏幕时不会乱七八糟。问题不是在调整窗口大小和隐藏菜单内容时菜单关闭，而是在调整窗口大小后，单击菜单会导致打开然后关闭菜单内容。内容未保持打开状态。

$(window).resize(function () {
    // PC main menu items
    $("#menu-content-1").hide();
    $("#menu-content-2").hide();
});

【问题讨论】：

标签： javascript jquery html css popup

【解决方案1】：

该脚本的目的是什么。请解释一下

  if (!(((e.clientX >= hstart) && (e.clientX <= hend)) && ((e.clientY >= vstart) && (e.clientY <= vend)))) {
            if (!(((e.clientX >= chstart) && (e.clientX <= chend)) && ((e.clientY >= cvstart) && (e.clientY <= cvend)))) {
                elem.slideUp();
            }
        }

【讨论】：

我正在使用它，所以如果用户调整窗口大小，它会隐藏所有菜单元素，这样我的移动菜单和主寻呼机菜单就不会弄乱。我的意思是，问题不在于调整窗口大小时菜单隐藏，而是调整大小后，单击菜单容器会立即打开和关闭。
@HelpNeeder 让我检查一下
你有什么改变吗？
不，即使我比较了旧代码和新代码，它们是相同的，现在它可以工作了。
这会查找菜单按钮和菜单内容容器的坐标。如果鼠标点击位于它们之外（当菜单容器打开时），它将导致菜单内容容器折叠。所以当用户点击第二个菜单项或其他任何地方时，菜单内容容器将自动关闭。

【解决方案2】：

我遇到的问题是由动画序列引起的。动画执行时间过长并且不允许整个脚本执行，因此某些事件处理程序无法按时激活。这个问题的解决方案是完全移除或真正加速元素隐藏或显示的动画。

【讨论】：