Question

我正在学习WordPress并查询我用于下拉菜单的一些自定义jQuery javascript。

javascript用于在鼠标链接或下拉列表等鼠标移开后略微延迟隐藏。

javascript在普通的html中工作得很好，但在我正在构建的基本WordPress主题中却没有。我尝试遵循无冲突的$ j建议，但不确定我是否做得对。

一个问题是下拉菜单在父链接的鼠标悬停时保持不变 - 它在javascript中指定的2秒后不会隐藏。

我认为它可能与行＆＃34; var menu_timer;＆＃34;在custom.js文件的顶部，但可能是代码在行上方或下方不起作用：

jQuery(document).ready(function($)

custom.js javascript文件在functions.php中排队，并按预期显示在页脚中。 custom.js文件中的所有其他javascripts都在工作，而不是程序员给我的顺序中显示的下拉菜单代码（例如，文档就绪线上方和下方）

var menu_timer;

jQuery(document).ready(function($) {

    submenuPersistent();
    $(window).resize(function() { 
        submenuPersistent();
    });

});

// no conflict
var $j = jQuery.noConflict();

// menu
 function submenuPersistent() {
    if($j(window).width() >= 651) {
        $j('#nav > ul > li .drop').hide();
        $j('#nav > ul > li').off('mouseenter');
        $j('#nav > ul > li').off('mouseleave');
        $j('#nav > ul > li').mouseenter(function() {
            if($j(this).find('.drop').length != 0){
                clearTimeout(menu_timer);
                $j('#nav > ul > li').not(this).find('.drop').hide(200);
                $j(this).find('.drop').show(200);
            }

        });
        $j('#nav > ul > li').mouseleave(function() { //edit: missed the $j originally
            if($j(this).find('.drop').length != 0){
                element= $j(this); //edit: missed the $j originally
                menu_timer= setTimeout(function() {
                    element.find('.drop').hide(200);
                },1500);
            }
        });
    }
    else {
        clearTimeout(menu_timer);
        $j('#nav > ul > li').off('mouseenter');
        $j('#nav > ul > li').off('mouseleave');
        $j('#nav > ul > li .drop').show();
    }
 }

该网站仍处于开发阶段，因此我不能在此刻显示实时网页。

我非常感谢有经验的javascript / WordPress用户提供的任何帮助。

有什么想法吗？

编辑：这已经解决了。我错过了几次$ j转换

Answer 1

感谢Chris G.的帮助。他促使我检查javascript错误。我在控制台部分进入了Web开发人员工具，它在几个地方显示了一个未定义的$ - 特别是我错过了$ j in：$（'＃nav＆gt; ul＆gt; li'）。mouseleave（function（）{和element = $（this）;.它现在按预期工作。

wordpress中的自定义下拉菜单javascript问题

1 个答案: