Question

我正在使用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所以我确定这可能是一些让我失望的东西。有人想指出我正确的方向吗？

Answer 1

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

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

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

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

无法在WordPress中使用jQuery Nav

3 个答案: