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

标签 javascript jquery wordpress

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

javascript 用于在父链接或下拉菜单等鼠标关闭后对下拉菜单隐藏进行轻微延迟。

javascript 在普通 html 中运行良好,但在我正在构建的基本 WordPress 主题中却不行。我尝试遵循无冲突的 $j 建议,但不确定我是否做对了。

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

我认为这可能与“var menu_timer;”这一行有关在 custom.js 文件的顶部,但可能是代码在行上方或下方不起作用:

jQuery(document).ready(function($)

custom.js javascript 文件在 functions.php 中排队,并按预期显示在页脚中。 custom.js 文件中的所有其他 javascript 都在工作,只是不是下拉菜单代码,它按程序员给我的顺序显示在下面(例如,在文档就绪行的上方和下方)

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 次转化

最佳答案

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

关于javascript - wordpress 中的自定义下拉菜单 javascript 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43932171/

相关文章:

mysql - 无法使复杂的 mysql 查询工作

php - 如何使我的插件适应多站点?

jquery - 简单的 WordPress AJAX 分页

javascript - 如何检查服务器和端口在 nodejs 中是否可用?

javascript - 在内部 forEach 循环中集成异步 mongo 调用

javascript - hasClass() 总是返回 false (jquery) 即使在切换它时也是如此

javascript - 防止透明固定导航栏下方的内容可见

javascript - 如何防止快速鼠标移动在我的绘图应用程序中打断一条线?

javascript - 尝试在不扭曲的情况下使图像适合屏幕时调整大小的滚动条问题

python - 根据另一个字段中的选择显示/隐藏 django 管理表单字段