2012-06-05 46 views
0

我在同一頁上有一個奇特的框和一個jQuery的手風琴。每個人獨立工作,但不在一起。某處有衝突。我看了幾個論壇和帖子,但不能解決問題。有人說先把jquery-ui腳本。這沒有用。有人說將這些功能合併成一個腳本。這沒有用。Fancybox和JQuery Accordian在同一頁上不起作用

這是我的頁面的頭部分。

`<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> 

我希望你能給我提供任何幫助。

回答

0

由於實際原因,一些插件在下載中包含jQuery版本,但您只需加載一個實例(最新版本可能)。另外,jQuery必須首先加載,在任何插件之前,甚至在jQuery UI之前加載。

在你的情況,你正在jQuery UI兩次加載jQuery兩次。使用單個實例並將其放在文檔中的任何插件之前。

此外,我沒有看到你在代碼中的任何地方加載fancybox CSS文件。

0

您的腳本順序應該是:

<!-- 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用戶界面的。 我注意到的第二件事是您正在從本地服務器加載jQuery Core和UI js文件,而不是CDN。我用Google CDN版本取代了它們。

對於Fancybox,你可能也想看看從CDNJS加載它們,但我現在已經離開它們了。

相關問題