Question

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

如果将光标放在列表项上几次，可以强制我正在尝试修复的错误。

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

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

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

$("#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来防止这种行为。

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

1 个答案: