点击时的简单 jquery 动画在 wordpress 网站中不起作用

Question

这让我很紧张……

我希望我的两个菜单列表（<ul id="cont1"> 和 <ul id="cont2">）在我们点击 .bttn1 和 时移动强>.bttn2。它们在侧边栏上。其中之一被菜单 div 隐藏：

文本小部件中的 HTML：

<div id="menu">

    <div class="bttn1">Pages public</div>
    <div class="bttn2">Pages communauté</div>

    <div id="cont">
        <ul id="cont1">
            <li class="n01">01</li>  
            <li class="n02" id="page9">
                <a href="http://www.igorlaszlo.com/test/">
                    <img src="images/icon1.png" alt="accueil" />
                    <p>Accueil</p>
                </a>
            </li>
            <li class="n03"></li>
            <li class="n04"></li>
            <li class="n05" id="page11">
                <a href="http://www.igorlaszlo.com/test/register/">
                    <img src="images/icon2.png" alt="abonnement" />
                    <p>Inscription</p>
                </a>
            </li>
            ...
        </ul>

        <ul id="cont2">
            <li class="n01">10</li>
            <li class="n02" id="page23">
                <a href="http://www.igorlaszlo.com/test/members/">
                    <img src="images/icon10.png" alt="communauté" />
                    <p>Liste Membres</p>
                </a>
            </li>
            <li class="n03"></li>
            <li class="n04"></li>
            <li class="n05" id="page25">
            ...
        </ul>
    </div>
</div>

CSS

#menu {
    width: 242px;
    letter-spacing: normal;
    line-height: normal;
    overflow: hidden;
}

#menu .bttn1,
#menu .bttn2 {
    position: relative;
    display: block;
    width: 80%;
    height: 30px;
    padding: 2%;
    line-height: 30px !important;
    text-align: center;
    cursor: pointer;
    color: #fdfdfd;
    background: #ce2d32;
    -webkit-box-shadow: 0px 1px 7px rgba(0,0,0,0.7);
    -moz-box-shadow: 0px 1px 7px rgba(0,0,0,0.7);
    box-shadow: 0px 1px 7px rgba(0,0,0,0.7);
    -webkit-transition:all .3s ease-in-out;
    -moz-transition:all .3s ease-in-out;
    -ms-transition:all .3s ease-in-out;
    -o-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out;
    -webkit-transform:rotate(5deg);
    -moz-transform:rotate(5deg);
    -ms-transform:rotate(5deg);
    -o-transform:rotate(5deg);
    transform:rotate(5deg); 
}
#menu #cont {
    position: relative;
    display: block;
    width: 500px;
    height: 550px;
}
#menu #cont1 {top: 0;left: 0;}
#menu #cont2 {top: 0;left: 252px;}
#menu ul {
    position: absolute;
    width: 242px;
    height: 450px;
    margin: 0;
    list-style: none;
}

我有一个 wordpress 测试网站，其中已经包含一个默认的 jquery 文件。 我将以下代码放在 /body 结束标记之前的 footer.php 中：

... 

<?php wp_footer(); ?>

<script>
    $(document).ready(function() {

        $('#menu #cont1').css('left',0);
        $('#menu #cont2').css('left','252px');

        $('#menu .bttn1').click(function(){
            $('#menu #cont1').delay(300).animate({'left':'-252px'},800,'easeInOut');
            $('#menu #cont2').delay(500).animate({'left':0},800,'easeInOut');
        });
        $('#menu .bttn2').click(function(){
            $('#menu #cont1').delay(500).animate({'left':0},800,'easeInOut');
            $('#menu #cont2').delay(300).animate({'left':'252px'},800,'easeInOut');
        });

    });
</script>

</body>
</html>

它不起作用，我没有发现问题。我也尝试将代码添加到head.php中，它根本不动......

测试地点：http://www.igorlaszlo.com/test/

问题是，上面的代码有什么问题，或者我如何测试是否有东西阻塞了脚本？

Answer 1

这个解决方案很简单，如果您检查控制台就可以看到它。

TypeError: $ is not a function

所以使用$ jQuery 使用jQuery。 在当前加载的jQuery中也没有easeInOut所以加载jQueryUi

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script> 

最终的javascript代码：

jQuery(document).ready(function() {
    jQuery('#menu #cont1').css('left',0);
    jQuery('#menu #cont2').css('left','252px');

    jQuery('#menu .bttn1').click(function(){
        jQuery('#menu #cont1').delay(300).animate({'left':'-252px'},800,'easeInOut');
        jQuery('#menu #cont2').delay(500).animate({'left':0},800,'easeInOut');
    });
    jQuery('#menu .bttn2').click(function(){
        jQuery('#menu #cont1').delay(500).animate({'left':0},800,'easeInOut');
        jQuery('#menu #cont2').delay(300).animate({'left':'252px'},800,'easeInOut');
    });
});

** 编辑 ** 我想你发现了你的错误。

Answer 2

您可以采取一些措施来解决问题。首先确保您的代码在 Word Press 之外正常工作。您可以在 JSFiddle 中重新创建您正在尝试执行的操作，以确保您的 JS 正常工作。

一旦你让它正常工作，就将它添加到你的 Word Press 网站。如果您遇到问题，请检查以确保您使用的是正确版本的 JQuery（旧版本可能会导致问题）您还应该确保在测试时禁用您的插件以确保没有 JavaScript 冲突。

最后你需要像这样为 WordPress 设置一个 JQuery 无冲突：

(function($){
    // your plugin code
})(jQuery);

你可以参考这个post here。