我正在学习 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/