jquery - 悬停时动画div高度不断扩展/折叠jQuery

Question

我目前正在我的网站上添加一个交互式菜单，提供有关鼠标悬停某些功能的信息。
单个列表项在鼠标悬停/鼠标悬停时展开/折叠它们的信息，但是当悬停一个列表项时，它会将其他项目向下推，导致它们穿过您的光标，从而使它们展开，这可能会发生很多次，因此它会在展开和折叠状态之间不断反弹很多次。

如果您将光标移动到列表项上几次，您可以强制执行我正在尝试修复的错误。

我认为必须有一种方法来防止某些列表项的无意扩展。例如，使当前展开的项目必须在另一个可以打开之前折叠？但我不知道如何用代码语言表达。

这是我正在谈论的元素：http: //jsfiddle.net/JHLQv/3/

下面是我如何编码扩展/折叠机制。下面的代码中包含有关前 2 个列表项的信息，但我对每个列表项都有这样的信息，只是为了让您知道。

$("#li_bar_1").hover(
function() {
  $(div_expandable).animate({
    height: '+=130'
    }, 'slow'
  );
},
function() {
  $(div_expandable).animate({
    height: '-=130px'
    }, 'slow'
  );
}
);
$("#li_bar_2").hover(
function() {
  $(div_expandable_2).animate({
    height: '+=130'
    }, 'slow'
  );
},
function() {
  $(div_expandable_2).animate({
    height: '-=130px'
    }, 'slow'
  );
}
);

问候

Answer 1

我想你应该使用这个插件Hover Intent来防止这种行为。