jQuery與導航菜單上的鼠標懸停事件衝突

我在Magento中有一個導航菜單，它在鼠標懸停時顯示子類別。還有一個使用jQuery插件的倒數計時器。jQuery與導航菜單上的鼠標懸停事件衝突

如果我刪除倒計時菜單工作正常，但如果我添加倒計時，倒計時工作正常，但菜單將不會再顯示鼠標懸停的類別。

菜單項的代碼：

<div id="menu10" class="menu popup-menu level-2" onmouseover="wpShowMenuPopup(this, 'popup10');" onmouseout="wpHideMenuPopup(this, event, 'popup10', 'menu10')"> 
<div class="parentMenu"> 
<a href="supertrash.html"> 
<span>SuperTrash</span> 
</a> 
</div> 
</div> 
<div id="popup10" class="popup child-2" onmouseout="wpHideMenuPopup(this, event, 'popup10', 'menu10')"> 
<div class="block1"> 
<div class="column"><div class="itemMenu level1"><a class="itemMenuName level1" href="supertrash/supertrash-rokjes.html">Rokjes</a></div></div><div class="column"><div class="itemMenu level1"><a class="itemMenuName level1" href="supertrash/stschoenen.html">Schoenen</a></div></div> 
<div class="clearBoth"></div> 
</div> 
</div>

用於鼠標懸停的JavaScript：

<!-- jquery framework from google api --> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 

<!-- google font-family, you can add whatever font suits you --> 
<link href='http://fonts.googleapis.com/css?family=Averia+Serif+Libre:300italic' rel='stylesheet' type='text/css'> 

<!-- The stylesheet --> 
<link rel="stylesheet" type="text/css" href="counter2/css/style2.css"> 

<!-- the countdown plugin --> 
<script src="counter2/coffeetime/coffeetime.min.js"></script> 
<!-- The countdown style --> 
<link rel="stylesheet" type="text/css" href="counter2/coffeetime/ctstyle.css"> 
<script> 

/* here u can set up different messages for the progress of the countdown 
if no message is set for the current percent value, it takes the next message, bigger or equal to that percentage 
*/ 
var message = new Array(); 
message[0] = "status: just started"; 
message[10] = "status: drinking a coffe"; 
message[20] = "status: just finished setting up the database"; 
message[30] = "status: brainstorming about the template"; 
message[50] = "status: choosing the color scheme"; 
message[80] = "status: thinking about the future"; 
message[90] = "status: nearly done"; 
message[100] = "status: finished"; 

$(document).ready(function() { 

function callback() { 
    alert("Sale is over"); 
} 


$("#flipit").coffeetime({ 
         /* COUNTDOWN SETTINGS */ 
         message: message, // the message array with the array keys as percent values 
         startYear: 2012, 
         startMonth: 8, 
         startDay: 30, 
         endYear: 2012, 
         endMonth: 9, 
         endDay: 7, 

         callbackFinish : callback, 
          }); 

$(".flip-title-subheading").html(" we started on "+ window.startDate+ " and we`ll finish on "+ window.endDate); 

}); 

$(document).ready(function() { 
    setTimeout(function() { 
     $(".flip-container").animate({ 
      "height" : 105 + "px" 
     }, 1000, "swing"); 
    }, 1000); 
}); 

</script>

I」：

function wpShowMenuPopup(objMenu, popupId) 
{ 
    objMenu = $(objMenu.id); var popup = $(popupId); if (!popup) return; 
    popup.style.display = 'block'; 
    objMenu.addClassName('active'); 
    var popupWidth = CUSTOMMENU_POPUP_WIDTH; 
    if (!popupWidth) popupWidth = popup.getWidth(); 
    var pos = wpPopupPos(objMenu, popupWidth); 
    popup.style.top = pos.top + 'px'; 
    popup.style.left = pos.left + 'px'; 
    if (CUSTOMMENU_POPUP_WIDTH) popup.style.width = CUSTOMMENU_POPUP_WIDTH + 'px'; 
}

其用於倒計時的jQuery插件已經嘗試了幾件事情：

在標題中也有不少世界jQuery的包括一個（較老（1.4.3））版本，試圖取代，隨着1.8.0版本，但後來沒有什麼工作
我試圖消除1.8包括在倒計時6.0版本，菜單正常工作的話，但沒有倒計時
我使用jQuery.noConflict（）倒計時嘗試，菜單繼續工作，但倒計時不

我不知所措，希望s omeone知道我做錯了什麼，謝謝！

來源

2012-09-05 Kishan

我會告訴你嘗試noConflict（），但你已經嘗試過了。因此，請嘗試更改$ for jQuery，這個保證magento使用正確的JS，cuz原型也使用$。如果不起作用，請查找2頁JS腳本，在頁面上做同樣的事情。並刪除一個。

來源

2012-09-05 14:11:20 Guerra

不完全正確，但你指出我在正確的方向，謝謝！ – Kishan

添加鼠標懸停功能

jQuery.noConflict(); 

function wpShowMenuPopup(objMenu, popupId)

{

objMenu = jQuery(objMenu.id); var popup = jQuery(popupId); if (!popup) return; 
popup.style.display = 'block'; 
objMenu.addClassName('active'); 
var popupWidth = CUSTOMMENU_POPUP_WIDTH; 
if (!popupWidth) popupWidth = popup.getWidth(); 
var pos = wpPopupPos(objMenu, popupWidth); 
popup.style.top = pos.top + 'px'; 
popup.style.left = pos.left + 'px'; 
if (CUSTOMMENU_POPUP_WIDTH) popup.style.width = CUSTOMMENU_POPUP_WIDTH + 'px';

}

希望這有助於！

來源

2012-09-05 18:20:52

試過這個，沒有工作不幸： – Kishan

畢竟它是noConflict（）。

添加以下只是倒計時腳本

var $c = jQuery.noConflict();

前和更改所有$變量倒計時$c工作。

我對noConflict（早些時候聲明）使用$i和$j變量，但是使一個新的變量有效。謝謝大家！

來源

2012-09-05 21:05:48 Kishan

jQuery與導航菜單上的鼠標懸停事件衝突

回答

相關問題