JQuery Accordion不工作，项目显示但不会动画

正如标题所示。基本上，我从网上下载了一个很好的手风琴模板，但是当我将它添加到我的网站时，它不起作用。我跟着他们的文档，并设法让它在单独的空html文档中工作，但在我自己的网站上没有运气。JQuery Accordion不工作，项目显示但不会动画

这里是我的代码，它是多么可怕对不起，我是新来这...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/index.dwt" codeOutsideHTMLIsLocked="false" --> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<!-- InstanceBeginEditable name="doctitle" --> 
<title>Untitled Document</title> 
<!-- InstanceEndEditable --> 
<style type="text/css"> 
@import url("SILXCSS.css"); 
</style> 
<title>Silx</title> 
<script type="text/javascript"> 
// <![CDATA[ 
function MM_swapImgRestore() { //v3.0 
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; 
} 
function MM_preloadImages() { //v3.0 
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); 
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) 
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} 
} 

function MM_findObj(n, d) { //v4.01 
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { 
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} 
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; 
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); 
    if(!x && d.getElementById) x=d.getElementById(n); return x; 
} 

function MM_swapImage() { //v3.0 
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) 
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} 
} 
// ]]> 
</script> 
    <link rel="Stylesheet" type="text/css" href="css/evoslider.css" /> 
    <link rel="Stylesheet" type="text/css" href="css/default/default.css" /> 

    <script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script> 
    <script type="text/javascript" src="scripts/jquery.easing.1.3.js"></script> 
    <script type="text/javascript" src="scripts/jquery.evoslider.lite-1.1.0.js"> 
</script> 
<style type="text/css"> 
div.fadehover { 
    position: relative; 
    } 

img.a { 
    position: absolute; 
    left: 0; 
    top: 0; 
     z-index: 10; 
    } 

img.b { 
    position: absolute; 
    left: 0; 
    top: 0; 
    } 
</style> 
<!-- InstanceBeginEditable name="head" --> 

<!-- InstanceEndEditable --> 
</head> 



<body> 
    <div id="header"> 
     <div id="logo"> 
      <h1> 
       … 
      </h1> 
     <div class="fadehover"> 
     <a href="index.html"><img src="images/logo.gif" alt="" class="a" /></a> 
     <a href="index.html"><img src="images/logo2.gif" alt="" class="b" /></a> 

     </div> 
</div>  
    </div> 
    <div id="navbar"> 
       <ul id="menu"> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="about.html">About Us</a></li> 
      <li><a href="activities.html">Activities</a> 
      </li> 
      <li><a href="partners.html">Partners</a></li> 
      <li><a href="contact.html">Contact Us</a></li> 
      <li><a href="http://silx.boards.net/">Forum</a></li> 
     </ul> 
    </div> 
    <div id="page" class="container"> 
     <div id="content"> 
     <div id="onecolumn"><!-- InstanceBeginEditable name="EditRegion3" --> 
      <div id="mySlider" class="evoslider default">  
       <dl> 

        <dt>slide one</dt> 
        <dd data-src="image1.jpg" data-thumb="image1-thumb.jpg"> 
        </dd> 

        <dt>slide two</dt> 
        <dd data-src="image2.jpg" data-thumb="image2-thumb.jpg"> 
        </dd> 

        <dt>slide three</dt> 
        <dd data-src="image3.jpg" data-thumb="image3-thumb.jpg"> 
        </dd> 

        <dt>slide four</dt> 
        <dd data-src="image4.jpg" data-thumb="image4-thumb.jpg"> 
        </dd> 

       </dl> 
      </div> 
     <script type='text/javascript'> 
      var myEvoSlider = $("#mySlider").evoSlider(); 
     </script> 
     <!-- InstanceEndEditable --></div> 
     </div> 
    </div> 



<script type='text/javascript'> 
$(document).ready(function(){ 
$("img.a").hover(
    function() 
    {  $(this).stop().animate({"opacity": "0"}, "slow");       }, 
    function() 
    { 
     $(this).stop().animate({"opacity": "1"}, "fast"); 
    }); 

}); 

     $(document).ready(function() { 
     $("#menu > li:has(ul)").mouseenter(function(){ 
      $(this).children("ul").css("display", "none"); 
      $(this).children("ul").css("left", "auto").fadeIn('slow'); 
     }).mouseleave(function(){ 
      $(this).children("ul").delay(300).fadeOut('fast', function() { 
      $(this).children("ul").css("left", "-9999em"); 
      }); 
     }); 
     }); 

$("ul#menu > li").fadeTo("slow", 0.6); 
$("ul#menu > li").hover(
    function() { $(this).fadeTo("slow", 1.0); }, 
    function() { $(this).fadeTo("slow", 0.5); } 
); 




function slideSwitch() { 
    var $active = $('#slideshow IMG.active'); 

    if ($active.length == 0) $active = $('#slideshow IMG:last'); 

    var $next = $active.next().length ? $active.next() 
     : $('#slideshow IMG:first'); 

    $active.addClass('last-active'); 

    $next.css({opacity: 0.0}) 
     .addClass('active') 
     .animate({opacity: 1.0}, 1000, function() { 
      $active.removeClass('active last-active'); 
     }); 
} 

$(function() { 
    setInterval("slideSwitch()", 5000); 
}); 
</script> 
<script type='text/javascript' src='jquery-1.10.1.min.js'></script>  
</body> 
<!-- InstanceEnd --></html>

来源

2013-07-13 jste89

jsFiddles对于像这样的东西是完美的 – turnt

您的网页上可能存在一些JQuery/JavaScript冲突。 – RahulD

感谢您的答案！更具体的你可以指出什么？我很茫然，我转移了一些代码，看看这是否有益于运气！ – jste89

<script type='text/javascript' src='jquery-1.10.1.min.js'></script>

和

<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>`

彼此冲突的，尝试删除1.10.1.min.js后。

来源

2013-07-15 18:22:26 RahulD

请将此标记为解决问题的答案。 – RahulD

JQuery Accordion不工作，项目显示但不会动画

回答

相关问题