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与导航菜单上的鼠标悬停事件冲突

回答

相关问题