在下拉菜單上爲mouseleave添加延遲

我使用的是Opencart（1.5.5.1）和Journal主題的較早版本。在下拉菜單上爲mouseleave添加延遲

下拉菜單立即在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'); 
     }); 
    } 
});

來源

2016-03-20 Alexander Adam

您可以使用 setTimeout 功能

你甚至可以把它淡出首先使用jQuery的淡出（）函數。

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

來源

2016-03-20 23:33:28 ikdekker

感謝您的回覆，ikdekker！我已經嘗試了您的解決方案，這當然做了一些事情，但它似乎不工作，因爲現在菜單甚至不關閉，無論我移動鼠標後等待多久。 –

你是否試圖看到超時被觸發？（使用console.log（）或alert（））。順便說一下，我最初因我的帖子而失敗，並意外地將參數按錯誤的順序排列。您的代碼與我現在的答案完全相同嗎？如果是這樣，那麼$（this）元素的目標是正確的嗎？ – ikdekker

你想刪除類'活躍'的元素與id'車'的元素？如果沒有，用所需的類替換$（this） – ikdekker

您可以使用jQuery delay()函數。 「只有當你使用jquery的功能」

但是，如果你打算使用removeClass()函數刪除該類，它將不起作用。你可以在CSS中這樣做來延遲一些操作。我使用transition-delay。我希望這將完全或至少接近你的目標。 :)

$('#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>

來源

2016-03-21 03:01:19 rmondesilva

感謝您的回覆。你可能是對的，但我無法得到這個工作。我錯過了什麼嗎？ –

您是否包含了jquery腳本？我的意思是jQuery庫。 – rmondesilva

是的，這是在內容管理系統上運行的，所以我很確定所有的庫都包含在每個頁面中。實際上，這個混亂的頁面至少包含8個不同的jQuery庫。 –

在下拉菜單上爲mouseleave添加延遲

回答

相關問題