jQuery的不WordPress的3.5工作(jQuery not working in Word

2019-08-06 12:52发布

所以,我似乎有一个问题与我的旧的WordPress主题之一。 我只是把我的主题之一走出黑暗作为一件我的投资组合的使用,并立即意识到,我的jQuery的侧边栏已经完全停止工作,我不知道为什么。 现在提个醒,我写的侧边栏这段代码之前的WordPress实现自己的“自定义”侧边栏的实现(所以我如果这涉及非常不确定,但高度怀疑。我想我开发它周围的WordPress 3.1的时间) 。 有过错的特定代码位于此处

<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文件。

下面是执行的一部分

<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

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

Answer 1:

你确定包括在同一页上2个不同版本的jQuery不会造成任何问题?

jQuery的版本的WordPress附带了(当你调用wp_head(其中可能会包括在内);)载荷在没有冲突的模式。 这说明在这里 :

基本上,你需要用你的脚本

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


文章来源: jQuery not working in Wordpress 3.5