0

我在 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() 进行倒计时，菜单继续工作，但倒计时没有

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

4

3 回答 3

0

毕竟是 noConflict() 。

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

var $c = jQuery.noConflict();

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

我将$iand$j变量用于 noConflict（之前已声明），但创建一个新变量很有效。谢谢大家！

于 2012-09-05T21:05:48.203 回答
0

将鼠标悬停功能添加为

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-05T18:20:52.777 回答
0

我会告诉你尝试 noConflict()，但你已经尝试过了。因此，尝试将 $ 更改为 jQuery，这个保证 magento 使用正确的 JS，因为原型也使用 $。如果不起作用，请在您的页面上查找 2 个 JS 脚本做同样的事情。并删除一个。

于 2012-09-05T14:11:20.217 回答