Question

我的JSFiddle Code在工作区内完美运行。只是尝试简单地显示/隐藏有孩子的菜单：

$('#menu-product-categories .sub-menu').hide(); //Hide children by default

$('#menu-product-categories li a').click(function(event){
    if ($(this).next('ul.sub-menu').children().length !== 0) {     
        event.preventDefault();
    }
$(this).siblings('.sub-menu').slideToggle('slow');
});

然而，当我使用相同的确切代码并将其放入我的wordpress网站时，它不起作用。我将jquery添加到网站的标题中，完全是如何在JSFiddle中完成的，我直接从我的wordpress网站复制/粘贴菜单结构。我不明白这是怎么发生的？任何建议都会有所帮助

感谢您的时间。

Answer 1

当浏览器找到脚本标记时，它会直接执行内容。因为您将此代码放入标题页中，所以在生成html之前执行 ，所以在您的菜单最终存在之前。

您有两种解决方案：

在菜单声明
之后，将脚本标记放在页面的末尾

更好的方法：在页面加载完成后执行脚本：

$( document ).ready(function() { $('#menu-product-categories .sub-menu').hide(); //Hide children by default $('#menu-product-categories li a').click(function(event){ if ($(this).next('ul.sub-menu').children().length !== 0) { event.preventDefault(); } $(this).siblings('.sub-menu').slideToggle('slow'); }); });

ready是一个事件，在所有DOM都已完全加载时触发。

相应的jQuery文档：http://api.jquery.com/ready/

JSFiddle代码工作，但在wordpress时不工作？

1 个答案: