Question

这让我很紧张......

我希望点击 .bttn1 时，我的两个菜单列表（ <ul id="cont1"> 和 <ul id="cont2"> ）会移动strong>和 .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。

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

2 个答案: