Question

我在网站上有两个Javascript脚本。一个是手风琴（显示/隐藏），另一个是基于超链接点击显示/隐藏的基本脚本。两个脚本都可以独立工作，但是一旦在同一页面上，手风琴就会停止工作：单击以显示手风琴中的项目停止工作。这是代码：

<link rel="stylesheet" href="[template_url]/js/tinycord/tinycord.css" type="text/css" />
<style>
.inner-boxes .box3, .details1 {
display:none;
}
</style>

<script type="text/javascript">
var parentAccordion=new TINY.accordion.slider("parentAccordion");
parentAccordion.init("acc","h3",0,-1);
</script>

<script>
$(function(){
    $(".para").click(function(){
        $("#fillit").html($(this).next(".details1").html()); 
    });
    $(".details1:first").clone().appendTo("#fillit").show();    
});
</script>

<script type="text/javascript" src="[template_url]/js/tinycord/script.js"></script>

script.js的内容

var TINY={};

function T$(i){return document.getElementById(i)}
function T$$(e,p){return p.getElementsByTagName(e)}

TINY.accordion=function(){
    function slider(n){this.n=n; this.a=[]}
    slider.prototype.init=function(t,e,m,o,k){
        var a=T$(t), i=s=0, n=a.childNodes, l=n.length; this.s=k||0; this.m=m||0;
        for(i;i<l;i++){
            var v=n[i];
            if(v.nodeType!=3){
                this.a[s]={}; this.a[s].h=h=T$$(e,v)[0]; this.a[s].c=c=T$$('div',v)[0]; h.onclick=new Function(this.n+'.pr(0,'+s+')');
                if(o==s){h.className=this.s; c.style.height='auto'; c.d=1}else{c.style.height=0; c.d=-1} s++
            }
        }
        this.l=s
    };
    slider.prototype.pr=function(f,d){
        for(var i=0;i<this.l;i++){
            var h=this.a[i].h, c=this.a[i].c, k=c.style.height; k=k=='auto'?1:parseInt(k); clearInterval(c.t);
            if((k!=1&&c.d==-1)&&(f==1||i==d)){
                c.style.height=''; c.m=c.offsetHeight; c.style.height=k+'px'; c.d=1; h.className=this.s; su(c,1)
            }else if(k>0&&(f==-1||this.m||i==d)){
                c.d=-1; h.className=''; su(c,-1)
            }
        }
    };
    function su(c){c.t=setInterval(function(){sl(c)},20)};
    function sl(c){
        var h=c.offsetHeight, d=c.d==1?c.m-h:h; c.style.height=h+(Math.ceil(d/2)*c.d)+'px';
        c.style.opacity=h/c.m; c.style.filter='alpha(opacity='+h*100/c.m+')';
        if((c.d==1&&h>=c.m)||(c.d!=1&&h==1)){if(c.d==1){c.style.height='auto'} clearInterval(c.t)}
    };
    return{slider:slider}
}();

Answer 1

我认为这些脚本实际上并不冲突。您尝试使用它时正在加载手风琴代码。也许重新排序脚本标签。

<script type="text/javascript" src="[template_url]/js/tinycord/script.js"></script>

应该在使用它定义的TINY.accordion之前进行：

var parentAccordion=new TINY.accordion.slider("parentAccordion");

我对init调用中字符串参数的含义知之甚少，但也许您可以更改创建手风琴的脚本元素并将其初始化为文档加载，例如通过使用jQuery的$.ready推迟它，或者在ID出现在那些字符串参数中的任何元素之后移动它。

此外，手风琴代码无意中使用了全球s。像s这样的短名称很容易发生碰撞，即使不是造成直接问题的原因也会造成维护危险。

var a=T$(t), i=s=0, ...

未在本地声明s。也许编辑它说

var a=T$(t), s, i=s=0, ...

Answer 2

<script language="javascript">
jQuery.noConflict();
var b=jQuery.noConflict() || $.noConflict;

b(document).ready(function(){
    b(".btn-slide").click(function(){
       b("#panel").slideToggle("slow");
       b(this).toggleClass("active"); return false;
    });
});
</script>

然后使用$代替b来访问jQuery。

两个Javascript脚本冲突（显示/隐藏）

2 个答案: