-1

古いWordpressテーマの1つに問題があるようです。ポートフォリオの一部として使用するためにテーマの 1 つを闇から取り出したところ、すぐに 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;


}

slide_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);
        });
    });
}
4

1 に答える 1

3

同じページに 2 つの異なるバージョンの jQuery を含めても問題が発生しないと確信していますか?

WordPress に同梱されている jQuery バージョン ( wp_head(); を呼び出すと含まれる可能性があります) は、非競合モードで読み込まれます。これはここで説明されています：

基本的に、スクリプトをラップする必要があります

jQuery(document).ready(function($) {
  // $() will work as an alias for jQuery() inside of this function
});
于 2013-01-12T00:38:38.110 に答える