Question

我想知道为什么JSFIDDLE完全正常工作，但在我的服务器中，它不起作用。请看下面的代码：

HTML

<div class="project">
    <div class="project-col2">
        <div class="project-mid-box">
            <ul>
                <a class="myButton"> <li> Project List 1  </li> </a> 
                <a class="myButton"> <li> Project List 2  </li> </a> 
            </ul>
        </div>
    </div>

    <div class="project-col3 myDiv">
        <div class="project-mid-box">
            <p> HERE </p>
        </div>
    </div>  

</div>

CSS

.project {overflow:hidden;}
.project h3 {color:#FFF;font-weight:normal;}
.project-col2 {float:left;width:50%;position:relative;}
.project-col3 {float:left;width:30%;position:relative;}
.project-mid-box {padding-left:10px;}
.project-mid-box ul li {border:1px solid #CCC;margin:2px 0;border-radius:5px;padding:5px;line-height:25px;}
.project-mid-box ul li:hover {background-color:#f7f7f7;
.myDiv {display:none;}

JS - 我添加了一个函数，因为在JSfiddle中会自动添加。

<script type="text/javascript">
$(document).ready(function() { 
    $(".myButton").click(function () {
        // Set the effect type
        var effect = 'slide'; 
        // Set the options for the effect type chosen
        var options = { direction: 'right' };
        // Set the duration (default: 400 milliseconds)
        var duration = 700;
        $('.myDiv').toggle(effect, options, duration);
    });
})  
</script>

最后，我没有忘记获取外部源jquery库

<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"> </script>

它应该完全在我的服务器上运行，但它根本不起作用。我错过了什么吗？

Answer 1

您正在加载主jQuery库的两个版本，但不加载jQueryUI。 code.jQuery.com上的jQueryUI资源位于ui目录。

示例http://code.jquery.com/ui/1.11.2/jquery-ui.min.js

我可以看到可能的混淆，因为有一个共同的版本号，所以你只需要在/ui/目录中添加你拥有的

Answer 2

您可以使用2个主jQuery，因此无法使用您的代码。使用一个主要的jQuery 1.11.2然后尝试。

Answer 3

使用您在代码中调用的库函数与此库相关

` <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>`

从右向左滑动从左向右滑动（不工作）

3 个答案: