悬停时动画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

我想你应该使用这个插件，悬停意图，来防止这种行为。