Question

当我将鼠标悬停在父对象上时，我创建了一个显示“语音气泡”的函数。但是，气泡设置为显示在父对象上方，由其高度计算。

我正在努力将其应用到响应式设计中，因此宽度和高度都是动态的。我尝试使用以下代码调整窗口大小后运行该函数：

$(window).resize(function() {
    $('.popup').popup();
}).trigger('resize');

这几乎可以解决这个问题，但它很有问题。您可以查看this jsfiddle I put together来了解我的意思。

在调整窗口大小之前，语音气泡可以正常工作，但是一旦调整大小并将鼠标悬停在其中一个触发器对象上，语音气泡就会动画显示为大约5次重复的内容。

毫无疑问，这不是最初为响应式设计而写的，我不是一个JS开发人员，所以如果有人看到任何可以做出的明显改进，我会乐意接受它们！：d

Answer 1

这是因为popup（）不止一次绑定到事件。只需使用它。

$(document).ready(function() {
$('.popup').popup();
});

然后，在鼠标悬停时设置弹出窗口的位置。

Answer 2

删除 -

$(window).resize(function () {
    $('.popup').popup();
  }).trigger('resize');

然后添加

  $('.popup').popup();