jQuery在Wordpress 3.5中不起作用 [英] jQuery not working in Wordpress 3.5

问题描述

所以我似乎对旧的Wordpress主题有疑问.我只是从黑暗中拿出一个主题作为我的作品集的一部分，立即意识到我的jQuery侧边栏已完全停止工作，我不确定为什么.现在提醒您，我在WordPress实现自己的自定义"侧边栏实现之前编写了这些侧边栏代码(因此，我不确定这是否与此相关，但对此表示高度怀疑.我想我是在Wordpress 3.1左右开发的) .错误的特定代码位于此处

So I seem to have an issue with one of my old Wordpress themes. I just brought one of my themes out of the darkness to use as a piece of my portfolio, and immediately realized that my jQuery sidebar has completely stopped working and I'm not sure why. Now mind you, I wrote this bit of sidebar code before WordPress implemented their own 'custom' sidebar implementations (so I'm very unsure if this relates to that but highly doubt it. I think I developed it around the time of Wordpress 3.1). The specific code at fault is located here

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/sliding_effect.js"></script> <!-- code for jquery menu -->

<?php wp_head(); ?>  

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function()
{
    $(".button-slide").click(function()
    {
        $("#slide-panel").slideToggle("slow");
    });
});

</script>

</head>  

我知道jQuery版本已经过时，但是即使在更新之后，我仍然没有成功.有谁知道我在做什么错.如果需要，我会很乐意提供更多代码.以上所有内容都位于我主题内的header.php文件中.

I know the jQuery version is out of date, but even after updating it I was still unsuccessful. Does anyone have a clue on what I am doing wrong. I'll happily provide more code if needed. All of the above is located in my header.php file within my theme.

这是实现的一部分

<ul id="sliding-navigation">

<br/>




<!-- Panel -->

<li class= "sliding-element"><a href="http://www.facebook.com/pages/TheEntertainmentArt/208687212498902" target="_TOP" " title="TheEntertainmentArt">Join Us On Facebook!</a></li>

     <li class="sliding-element"><h3>Menu</h3></li>

     <li class="sliding-element"><a href= "http://theentertainmentart.info/category/ps3">Playstation 3</a></li>
     <li class="sliding-element"><a href= "http://theentertainmentart.info/category/360">Xbox 360</a></li>
     <li class="sliding-element"><a href= "http://theentertainmentart.info/category/wii">Wii</a></li>
     <li class="sliding-element"><a href= "http://theentertainmentart.info/category/film">Film</a></li>
     <li class="sliding-element"><a href= "http://theentertainmentart.info/category/music">Music</a></li>
     <li class="sliding-element"><a href= "http://theentertainmentart.info/category/art">Art</a></li>
     <li class="sliding-element"><a href= "http://theentertainmentart.info/category/coding">Coding</a></li>
      <li class="sliding-element"><a href= "http://theentertainmentart.info/category/uncategorized">Misc</a></li>

和一些CSS

  #navigation-block {
        position:relative;
        /*top:100px;
        left:100px;*/
    }

    #hide {
        position:absolute;
        top:30px;
        left:-190px;
    }

    ul#sliding-navigation
    {

        list-style: none;
        /*font-size: .75em;*/
        font-size: 1em;
        /*margin: 30px 0;*/
        padding: 0;
        width: 175px;



    }
ul#sliding-navigation li.sliding-element h3,
ul#sliding-navigation li.sliding-element a
{
    display: block;
    width: 175px;

    padding: 5px 10px;
    margin: 0;
    margin-bottom: 5px;
    /* corner code */
    /*border-bottom-right-radius: 50px;
    border-top-right-radius: 50px;
    border-top-left-radius: 50px;
    -moz-border-radius-topright: 50px;
    -moz-border-radius-topleft: 50px;
    -moz-border-radius-bottomright: 50px;*/
    -moz-border-radius: 1em 4em 1em 4em;
    border-radius: 1em 4em 1em 4em;
    border: outset;


}

sliding_effect.js

sliding_effect.js

$(document).ready(function()
{
    slide("#sliding-navigation", 25, 15, 150, .8);
});

function slide(navigation_id, pad_out, pad_in, time, multiplier)
{
    // creates the target paths
    var list_elements = navigation_id + " li.sliding-element";
    var link_elements = list_elements + " a";

    // initiates the timer used for the sliding animation
    var timer = 0;

    // creates the slide animation for all list elements 
    $(list_elements).each(function(i)
    {
        // margin left = - ([width of element] + [total vertical padding of element])
        $(this).css("margin-left","-180px");
        // updates timer
        timer = (timer*multiplier + time);
        $(this).animate({ marginLeft: "0" }, timer);
        $(this).animate({ marginLeft: "15px" }, timer);
        $(this).animate({ marginLeft: "0" }, timer);
    });

    // creates the hover-slide effect for all link elements         
    $(link_elements).each(function(i)
    {
        $(this).hover(
        function()
        {
            $(this).animate({ paddingLeft: pad_out }, 150);
        },      
        function()
        {
            $(this).animate({ paddingLeft: pad_in }, 150);
        });
    });
}

推荐答案

您确定在同一页面上包含2个不同版本的jQuery不会造成任何问题吗?

Are you sure including 2 different versions of jQuery on the same page won't cause any problems?

WordPress附带的jQuery版本(在调用wp_head()时可能会包括在内)以无冲突模式加载. 此处:

The jQuery version WordPress ships with (which might get included when you call wp_head(); ) loads in the no conflict mode. This is explained here:

基本上，您需要使用

jQuery(document).ready(function($) {
  // $() will work as an alias for jQuery() inside of this function
});

这篇关于jQuery在Wordpress 3.5中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！