jquery - 调整窗口大小后重新计算高度

Question

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

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

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

这几乎似乎可以解决问题，但它非常有问题。您可以通过查看我放在一起的这个 jsfiddle来了解我的意思。

在调整窗口大小之前，对话气泡可以正常工作，但是一旦调整大小并且您将鼠标悬停在其中一个触发对象上，对话气泡就会进行 5 次左右重复的动画。

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

score 1 · Accepted Answer

这是因为 popup() 不止一次地绑定到事件。就用这个。

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

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

score 0 · Accepted Answer

消除 -

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

然后添加

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

2 回答 2