无法让 jQuery Nav 在 WordPress 中工作答案

【问题标题】：Can't get jQuery Nav working in WordPress无法让 jQuery Nav 在 WordPress 中工作
【发布时间】：2012-11-17 23:37:29
【问题描述】：

我正在为我的网站创建一个移动导航，使用 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，所以我确信这可能是一些小问题。有人想指出我正确的方向吗？

【问题讨论】：

标签： jquery wordpress mobile navigation

【解决方案1】：

你确定你没有忘记在你的 head 部分添加这一行吗？

<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>

【讨论】：

WP 自动安装了 jQuery，你必须在头中调用它：<?php wp_enqueue_script("jquery"); ?> 我在 HEAD 中。但是由于添加它似乎使它起作用，我假设 enqueue 函数无法与我的主题正常工作。
我在头部添加了对 jQeury 脚本的调用，导航确实开始工作，但是我担心 jQuery 与其他插件冲突。这就是为什么我真的很想在可能的情况下使用<?php wp_enqueue_script("jquery"); ?>。
jQuery 是默认加载的，所以你不需要做任何事情。您无需将wp_enqueue_script("jquery"); 放入您的header.php。主要问题是：你能依赖 jQuery 的 WordPress 版本吗？如果没有，您必须按照 IoQ 指示的程序，但以 wp_deregister_script('jquery') 开始注销 WordPress 版本，然后使用 wp_register_script 注册您的版本，然后使用 wp_enqueue_script。
我更喜欢使用默认版本的 WordPress，因为这似乎是避免冲突的最佳方式。但是，有些事情阻止了这种情况的发生。
我决定使用您的解决方案并使用 Google CDN 调用 jQuery，一切都像魅力一样工作。

【解决方案2】：

使用此函数<?php wp_enqueue_script("jquery"); ?> 调用 jquery 库是不够的。您必须使用 wp_enqueue_scripts 操作来挂钩它。如果您真的担心 jquery 冲突，请按照此操作并将此代码放在您的 functions.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');

【讨论】：

这与上面的@barakadam 注释相结合，为我解决了这个问题。

【解决方案3】：

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');
?>

这就是为我解决的问题。感谢 barakadam 和 loQ 的帮助。我不得不使用 Google CDN 来覆盖默认的 WP jQuery。

【讨论】：