Question

我正在使用较早版本的Opencart（1.5.5.1）和Journal主题。

下拉菜单会在mouseleave上立即消失。这在桌面上确实不是问题，但在触摸屏设备上会导致问题。我需要它才能保持几秒钟，最好快速淡出。

我已经阅读了一些有关此主题的类似帖子，但发现解决方案有点难以应用于我的代码。我甚至不确定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()功能。 ＆＃34;只有在使用jquery的功能时才会使用＆＃34;

但如果您要使用removeClass()功能删除该课程，则无效。你可以在CSS中做这样的事情来推迟一些行动。

我使用transition-delay。我希望这将完全或至少接近你的目标。：）

`

＆＃13;

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

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

`

Answer 2

你可以使用 http://ed-thelen.org/comp-hist/Knuth-Sort.html 功能

你甚至可以通过使用jQuery的fadeOut（）函数使其淡出。

$(this).fadeOut(2000);
setTimeout(function(){
    $(this).removeClass('active');
}, 2000);

在下拉菜单上添加mouseleave延迟

2 个答案: