Question

我在Magento中有一个导航菜单，在鼠标悬停时显示子类别。还有一个使用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：

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

我尝试了几件事：

在标题中还有一个（较早的（1.4.3））版本的jQuery，尝试用1.8.0版本替换它，但后来没有任何效果
我尝试删除倒计时中包含的1.8.0版本，然后菜单正常运行，但没有倒计时
我尝试使用jQuery.noConflict（）进行倒计时，菜单一直有效，但倒计时没有

我很茫然，我希望有人知道我做错了什么，谢谢！

Answer 1

我会告诉你尝试noConflict（），但你已经尝试过了。所以，尝试为jQuery更改$，这个garantee magento使用正确的JS，cuz原型也使用$。如果不起作用，请寻找2个JS脚本在页面上执行相同的操作。删除一个。

Answer 2

将鼠标悬停功能添加为

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

}

希望这会有所帮助!!

Answer 3

毕竟是noConflict（）。

在倒计时脚本之前添加以下内容

var $c = jQuery.noConflict();

将倒计时中的所有$变量更改为$c。

我正在使用$i和$j变量作为noConflict（之前已经声明过），但是制作一个新的变量是神奇的。谢谢大家！

jQuery与导航菜单上的mouseover事件冲突

3 个答案: