jQuery not working in Wordpress 3.5

问题:

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>  

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.

Here's a portion of the implementation

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

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

$(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);
        });
    });
}

回答1:

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

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:

Basically you need to wrap your script with

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