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

Two Javascript scripts conflicting (show/hide)

本文关键字：隐藏 显示 Javascript 脚本 冲突 两个      更新时间：2023-09-26

我在一个网站上有两个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>

脚本内容.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}
}();

我认为这些脚本实际上并不冲突。 您正在加载折叠代码后尝试使用它。 也许可以重新排序脚本标记。

<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, ...

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

相关文章：