Question

我在同一页面上有一个花哨的盒子和一个jquery手风琴。每个都独立工作但不在一起。某处发生了冲突。我看了几个论坛和帖子，但无法修复。有人说把jquery-ui脚本放在第一位。那没用。有人说将功能合并到一个脚本中。那没用。

这是我页面的头部。

`<head>
`<title>Transportation Business Group</title>
`<meta name="KEYWORDS" content="International business group.">
`<link rel="stylesheet" href="/stylesheets/voglobalstyle.css" type="text/css" media="screen,projection">
`<link rel="stylesheet" href="stylesheets/style.css" type="text/css" media="screen,projection">
`<meta http-equiv="content-type" content="text/html; charset=utf-8">

`<script src="/scripts/jQuery-UI/1.8.17/jquery-ui.js" type="text/javascript"></script>
`<link rel="stylesheet" href="/scripts/jQuery-UI/1.8.17/Content/themes/base/twisty.ui.css"
    type="text/css" media="screen,projection" />
`<script type="text/javascript" src="/scripts/jquery/Plugins/fancybox/jquery-1.4.2.min.js"></script>
`<script type="text/javascript" src="/scripts/jquery/Plugins/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
`<script type="text/javascript" src="/scripts/jquery/Plugins/fancybox/jquery.fancybox-1.3.1.js"></script>
`<script src="/scripts/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        /*
        *   Examples - images
        */
        $("#accordion").accordion({
            autoHeight: false,
            navigation: true,
            collapsible: true,
            active: true
        });
        $("a#MikeFormal").fancybox({
            'titleShow': true,
            'titlePosition': 'over',

            'autoScale': false
        });

        $("a#MikeInformal").fancybox({
            'titleShow': true,
            'titlePosition': 'over',

            'autoScale': false
        });



    });
</script>
 </head>

我很感激你能给我的任何帮助。

Answer 1

由于实际原因，某些插件在下载中包含了一个jQuery版本，但您只需要加载一个实例（可能是最新版本）。另外，jQuery必须首先加载，在任何插件之前，甚至在jQuery UI之前。

在你的情况下，你在jQuery UI之后加载jQuery两次。使用单个实例并将其放在文档中任何插件之前。

此外，我没有看到您在代码中的任何位置加载fancybox CSS文件。

Answer 2

您的脚本顺序应为：

<!-- Jquery must load first -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="/scripts/jQuery-UI/1.8.17/Content/themes/base/twisty.ui.css"
    type="text/css" media="screen,projection" />
<script type="text/javascript" src="/scripts/jquery/Plugins/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="/scripts/jquery/Plugins/fancybox/jquery.fancybox-1.3.1.js"></script>

我注意到你还使用了更新版本的jquery核心和最新版本的jQuery UI。我注意到的第二件事是你从本地服务器而不是CDN加载jQuery Core和UI js文件。我用Google CDN版本替换了它们。

对于Fancybox，您可能还想查看从CDNJS加载它们，但我暂时将它们保留下来。

Fancybox和JQuery手风琴不能在同一页面上工作

2 个答案: