0

我正在使用 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，所以我确信这可能是一些小问题。有人想指出我正确的方向吗？

4

3 回答 3

2

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

<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>
于 2012-11-18T00:28:32.847 回答
1

用这个函数调用一个 jquery 库<?php wp_enqueue_script("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');
于 2012-11-18T08:15:38.757 回答
0 
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。

于 2012-11-19T18:12:01.550 回答