与WordPress菜单一起使用时，jQuery不起作用

时间：2014-08-14 作者：hannahcreative

我正在使用一个朋友提供给我的入门主题，并且已经在网站上成功实现了几次jQuery。我希望当用户单击菜单中的li时，div中的背景图像会发生变化。

<ul class="mainNav">
    <?php wp_nav_menu( array( \'container\' => false, \'theme_location\' => \'primary\' ) ); ?>
</ul>

$(function(){
$(\'.menu-item-23\').click(function(){
  $(\'#changeMe\').css(\'background-image\',\'url("../wp-content/themes/theme-name/i/logo4.png")\');
});
如果我更换，我可以使这项工作。menu-item-23和页面上的其他元素—所以我知道这不是文件路径问题，我不认为这是jQuery代码。似乎我没有正确选择列表项，但我尝试了几十种不同的选择器，（li#menu-item-23、li.menu-item-23、ul.mainNav li#menu-item-23等）

2 个回复
SO网友:Bjorn

你失踪了<script> 标记您使用了错误的jQuery变量名称。如果要使用$别名，需要使用ashelgatheviking建议的noConflict或切换到“jQuery”，而不是缺少$）；在上面发布的代码末尾，您应该考虑将JS分离到一个单独的文件中，并在主题函数或其他适当的主题或插件PHP文件中使用wp\\u enqueue\\u脚本

SO网友:Tom J Nowell

Bjorn的回答有一些很好的地方，但我会完全避免使用javascript，并使用类似于以下内容的css：

.mainNav li:active {
    background-image: transparent url(\'i/logo4.png\') no-repeat;
}
更好的是，我将使用.mainNav a:active, 这表明您的链接目标不是很大，您正在使用li 不是a 定义尺寸和大小/填充/边距的步骤

这里根本不需要javascript

结束
标签： menus   jquery   css   小码农  

相关推荐

仅将CSS样式添加到管理区页面(不添加帖子或CPT)

我使用它在管理区域加载css样式（对于任何非管理员的用户）：function wpse_admin_styles() { if ( !current_user_can( \'manage_options\' ) ) { echo \'<style> .fun-stuff-here {color:aqua;} </style> \';