jquery - 在下拉菜单上添加 mouseleave 延迟

Question

我使用的是旧版本的 Opencart (1.5.5.1) 和 Journal 主题。

鼠标离开时下拉菜单立即消失。这在桌面上并不是真正的问题，但在触摸屏设备上却会引起问题。我需要它停留几秒钟，然后最好快速淡出。

我读过一些关于这个主题的类似文章，但发现解决方案有点难以应用于我的代码。我什至不确定 mouseleave 是否以同样的方式适用于触摸屏(可能不是)。

任何人都可以通过添加某种适用于桌面和移动设备的延迟来提供帮助吗？

代码如下:

$('#cart > .heading a').die('click');
$('#cart').die('mouseleave').die('mouseover').die('mouseleave').die('click');
$('#cart').live('mouseover', function () {
    if (!$("#cart").hasClass('active')) {
        if (!Journal.isOC2) {
            $('#cart').load('index.php?route=module/cart #cart > *');
        }
        $('#cart').addClass('active');
        $('#cart').live('mouseleave', function () {
            $(this).removeClass('active');
        });
    }
});

Answer 1

您可以使用 jQuery delay()功能。 “仅当您使用 jquery 的函数时”

但是，如果您要使用 removeClass() 函数删除该类，它将不起作用。您可以在 CSS 中执行类似的操作来延迟某些操作。

我使用转换延迟。我希望这将完全或至少接近您的目标。 :)

`

$('#test').hover(function(){
  $('#dropdown').addClass('active');
}, function(){
  $('#dropdown').removeClass('active');
});

/* Change transition-delay 2s(2 seconds) to how long do you want to delay it. */
#dropdown.active{
  opacity: 1 !important;  
  -webkit-transition-property: opacity; /* Safari */
    -webkit-transition-delay: 0s; /* Safari */
    transition-property: opacity;
    transition-delay: 0s;
}

#dropdown{
  opacity: 0;
  -webkit-transition-property: opacity; /* Safari */
    -webkit-transition-delay: 2s; /* Safari */
    transition-property: opacity;
    transition-delay: 2s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="test">
    HOVER ME PLEASE!
</div>

<div id="dropdown">
    EXAMPLE DROPDOWN
</div>

`