Question

我无法解决Lavalamp和Accordion之间的冲突，这是代码。当其中一个工作时，另一个不工作，反之亦然。我删除了一个jquery库（jquery-1.4.min.js或jquery.min.js），但它不起作用。我也改变了脚本的位置：第二个脚本有效，第一个脚本没有。在这种特殊情况下，lavalamp不起作用：

<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="js/cufon.yui.js"></script>
<script type="text/javascript" src="js/myriad.js"></script>

<script type="text/javascript">
$(function() {
     $("#one,#two,#three,#four,#five").lavaLamp({
        fx: "backout", 
        speed: 700
     });
});
</script>

<script type="text/javascript">

Cufon.replace('li a', {hover: true});

</script>




<script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="navAccordion.min.js"></script>
<script>
jQuery(document).ready(function(){

    //Accordion Nav
    jQuery('.mainNav').navAccordion({
        expandButtonText: '<i class="fa fa-plus"></i>',  //Text inside of buttons can be HTML
        collapseButtonText: '<i class="fa fa-minus"></i>'
    }, 
    function(){
        console.log('Callback')
    });
});
</script>

Answer 1

首先，将所有外部库放在开头。我假设您的代码是html文件中<head>的一部分.-

另外：不要加载jQuery两次。使用两个版本中较高的版本并将其置于顶部。我受过良好教育的猜测是，类似的东西会起作用：

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="js/cufon.yui.js"></script>
<script type="text/javascript" src="js/myriad.js"></script>
<script type="text/javascript" src="navAccordion.min.js"></script>

<script>
$(document).ready(function(){
     $("#one,#two,#three,#four,#five").lavaLamp({
        fx: "backout", 
        speed: 700
     });

    //Accordion Nav
    $('.mainNav').navAccordion({
        expandButtonText: '<i class="fa fa-plus"></i>',  //Text inside of buttons can be HTML
        collapseButtonText: '<i class="fa fa-minus"></i>'
    }, 
    function(){
        console.log('Callback')
    });
});
</script>
<body>
Your magic stuff containing something with class mainNav and id "one, two three, four"

</body>
</html>

冲突Lavalamp手风琴jquery

1 个答案: