jQuery，slideToggle 的问题答案

【问题标题】：jQuery, issue with slideTogglejQuery，slideToggle 的问题
【发布时间】：2013-08-09 21:27:57
【问题描述】：

当我的鼠标悬停在 div .test 上时，我希望 div .box 使用 slideToggle 高于 .test，当鼠标离开 .test 时，我希望 .box 再次使用 slideToggle。

它运行良好，但是当我在 .test 的左上角移动鼠标时，它似乎不起作用，我不知道为什么......

我的 CSS 是：

.box{
    z-index:2;
    position: absolute;
}

还有我的 jQuery：

box = function(el) {
    $('body').append('<div class="box"></div>');
    var box = $('.box:last');
    var posTop = el.offset().top;
    var posLeft = el.offset().left;
    box.hide().css({
        'left': posLeft,
        'top': posTop
 }).html('azerty<br>azerty<br>azerty<br>azerty<br>azerty<br>azerty<br>azerty').slideToggle(150);
}

boxStop = function() {
    var box = $('.box:last');
    box.stop().slideToggle(150, function() {box.remove();});
}

$(document).on('mouseover', '.test', function() {
    box($(this));
}).on('mouseout', function() {
    boxStop();
});

这里有一个小提琴：http://jsfiddle.net/malamine_kebe/sKNcs/3/

【问题讨论】：

是因为向下滑动的元素突然出现在你的鼠标指针所在的位置，触发了原元素的mouseleave事件，又向上滑动，常见错误。

标签： jquery function slidetoggle

【解决方案1】：

尝试将.box 的z-index 更改为-1，这样它就不会覆盖.test 并阻止鼠标悬停。

.box{
    position: absolute;
    z-index: -1;
}

这是JSFiddle。

编辑：由于负 z-index 将使元素位于所有其他元素之后（您可能不想要），您还可以定位 .test 并确保它具有比 .box 更高的 z-index .

.box{
    position: absolute;
}

.test {
    z-index: 1;
    position: absolute; /*could be relative or fixed too*/
}

还有JSFiddle。

【讨论】：

谢谢，它运行良好。知道当鼠标悬停在 .box 上时如何停止 slideToggle 吗？

【解决方案2】：

框出现了，然后鼠标不再在您的 div.test 上，而是在 div.box 上。

您可以添加“pointer-events:none;”到你的 CSS：

.box{
  z-index:2;
  position: absolute;
  pointer-events:none;
}

但这仅适用于新浏览器。

【讨论】：