我正在使用jQuery为我的网站创建一个移动导航，以隐藏/显示子链接。下面是导航的工作示例：http://codepen.io/johnmotyljr/pen/HGADn
但是，当我将javascript放入WordPress主题的HEAD中时，它似乎不起作用。这是我在主题中使用的代码：
<script type="text/javascript">
$(function() {
$('ul.menu > li > a').click(function(e) {
$('ul.sub-menu').slideUp('normal');
if($(this).next('ul.sub-menu').is(':hidden') === true) {
$(this).next('ul.sub-menu').slideDown('normal');
}
e.preventDefault();
});
});
</script>
我很少使用Javascript/jQuery，所以我确信这可能是一些小问题阻碍了我。有人想为我指出正确的方向吗？
你确定你没有忘记在你的头部部分添加这一行吗？
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
我敢打赌你忘了包含jQuery脚本...只需添加此行。所以你的代码应该是这样的（只需复制粘贴所有内容，它就可以工作 - 我测试了它 - 脚本在 head 部分内）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
/*
* $(document).ready(function() { });
* is the same as
* $(function() { });
*/
$(function() {
$('ul.menu > li > a').click(function(e) {
$('ul.sub-menu').slideUp('normal');
if($(this).next('ul.sub-menu').is(':hidden') === true) {
$(this).next('ul.sub-menu').slideDown('normal');
}
e.preventDefault();
});
});
/*
* Page reference: http://css-tricks.com/forums/discussion/20608/mobile-navigation-dropdown#Item_10
*/
</script>
<style>
#main-nav_responsive {
display:block;
z-index: 99;
margin: 0 auto;
width: 95%;
}
#main-nav_responsive li {
list-style:none;
margin: 0 auto;
padding-top: 2px;
}
#main-nav_responsive ul {
padding: 0px;
height: auto;
z-index: 10000;
}
#main-nav_responsive ul li a {
display: block;
color:white;
text-decoration:none;
font: normal 18px "Century Gothic", sans-serif;
text-align: left;
margin: 0;
text-transform:capitalize;
background: #ED1C3F;
padding: 9px 0px 11px 20px;
text-transform:lowercase;
}
#main-nav_responsive ul li a:hover {
background:#E35959;
}
#main-nav_responsive .sub-menu li a {
background: #35342f;
}
ul.sub-menu {
display:none;
}
</style>
</head>
<body>
<div id="main-nav_responsive">
<div>
<ul class="menu">
<li>
<a href="#">Specialties</a>
<ul class="sub-menu">
<li><a href="#" >Consumer Packaged Goods</a></li>
<li><a href="#" >Grocery Stores</a></li>
<li><a href="#" >Resorts + Hospitality</a></li>
<li><a href="#" >Education</a></li>
<li><a href="#" >New Product Development</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-522"><a href="#" >Services</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-523"><a href="#" >Advertising</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-538"><a href="#" >Branding</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-524"><a href="#" >PR</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-525"><a href="#" >Online</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-527"><a href="#" >Events</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-643"><a href="#" >Results</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-645"><a href="#" >About</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-531"><a href="#" >Who We Are</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-532"><a href="#" >How We Work</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-533"><a href="#" >Blog</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-534"><a href="#" >Contact</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-535"><a href="#" >Careers</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
用
这个函数<?php wp_enqueue_script("jquery"); ?>调用jquery库是不够的。您必须使用 wp_enqueue_scripts 操作挂钩它。如果你真的关心jquery冲突，那么请遵循这个并将这段代码放在你的函数中.php
//function to call jquery
function install_jquery(){
wp_enqueue_script('jquery');
}
//finally, the action hook to put jquery library in your theme
add_action( 'wp_enqueue_scripts', 'install_jquery');
function my_scripts_method() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js');
wp_enqueue_script( 'jquery' );
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
?>
这就是为我解决它的原因。感谢巴拉卡达姆和loQ的帮助。我不得不使用Google CDN来覆盖默认的WP jQuery。