2个功能的JS起冲突
我找的导航和列表2个功能。
但是实现导航和列表这2个功能的他们自己的JS写的好像有冲突.我把导航的JS注释了列表就没问题,反之导航就出问题.
其中导航的JS是用的JQuery如下:(当然还有css不过它没问题,所以主要就是如下的js）
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.hoverIntent.minified.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { function megaHoverOver() { $(this).find(".sub").stop().fadeTo('fast', 1).show(); //Calculate width of all ul's (function($) { jQuery.fn.calcSubWidth = function() { rowWidth = 0; //Calculate row $(this).find("ul").each(function() { rowWidth += $(this).width(); }); }; })(jQuery); if ($(this).find(".row").length > 0) { //If row exists... var biggestRow = 0; //Calculate each row $(this).find(".row").each(function() { $(this).calcSubWidth(); //Find biggest row if (rowWidth > biggestRow) { biggestRow = rowWidth; } }); //Set width $(this).find(".sub").css({ 'width': biggestRow }); $(this).find(".row:last").css({ 'margin': '0' }); } else { //If row does not exist... $(this).calcSubWidth(); //Set Width $(this).find(".sub").css({ 'width': rowWidth }); } } function megaHoverOut() { $(this).find(".sub").stop().fadeTo('fast', 0, function() { $(this).hide(); }); } var config = { sensitivity: 2, // number = sensitivity threshold (must be 1 or higher) interval: 100, // number = milliseconds for onMouseOver polling interval over: megaHoverOver, // function = onMouseOver callback (REQUIRED) timeout: 500, // number = milliseconds delay before onMouseOut out: megaHoverOut // function = onMouseOut callback (REQUIRED) }; $("ul#topnav li .sub").css({ 'opacity': '0' }); $("ul#topnav li").hoverIntent(config); }); </script><!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"><head><title>点击弹出下拉列表效果，sky整理收集。</title><style type="text/css">body{ margin:10px; padding:10px;}body,td,div,span,li{ font-size:12px;}.title01,.title02{ color:#fff; font-weight:bold;}#DoorP{ border:12px solid #eee; width:150px; height:300px; padding:4px; background:#fff;}.title01{ width:100%; height:25px; background:#00ccff; cursor:pointer;}.title02{ width:100%; height:25px; background:#99cc00; cursor:pointer;}.content{ background:#eee; border-bottom:2px solid #fff; overflow:hidden; color:#666; padding-left:4px; padding-right:4px; line-height:18px;}</style><!--棕：#eee;蓝：#00ccff;绿：#99cc00;--></head><body><div id="DoorP"> <table> <tr> <td> 站长特效网 </td> </tr> </table> <div class="content"> zzjs 网页特效 广告代码 </div> <table> <tr> <td> 第二层信息 </td> </tr> </table> <div class="content"> ThirdteenDevil </div> <table> <tr> <td> 第三层信息 </td> </tr> </table> <div class="content"> devil13th </div></div><script type="text/javascript"> var open = 2;// 设置初始打开的层序号 var openState = new Array(); var closeState = new Array(); var dH = 220; function $(id){ if(document.getElementById(id)) { return document.getElementById(id); } else { alert("没有找到!"); } } function $tag(id,tagName){ return $(id).getElementsByTagName(tagName) } function closeMe(Cid,Oid){ var h = parseInt(Ds[Cid].style.height); //alert(h); if(h > 0) { h = h - Math.ceil(h/3); Ds[Cid].style.height = h+"px"; } else { openMe(Oid); clearTimeout(closeState[Cid]); return false; } closeState[Cid] = setTimeout("closeMe("+Cid+","+Oid+")"); } function openMe(Oid){ var h = parseInt(Ds[Oid].style.height); //alert(h); if(h < dH) { h = h + Math.ceil((dH-h)/3); Ds[Oid].style.height = h+"px"; } else { clearTimeout(openState[Oid]); return false; } openState[Oid] = setTimeout("openMe("+Oid+")"); } var Ds = $tag("DoorP","div"); var Ts = $tag("DoorP","table"); if(Ds.length != Ts.length) { alert("标题和内容数目不相同!"); } for(var i = 0 ; i < Ds.length ; i++) { if(i==open) { Ds[i].style.height = dH+"px"; Ts[i].className="title01"; } else { Ds[i].style.height = "0px"; Ts[i].className="title02"; } Ts[i].value = i; Ts[i].onclick = function(){ if(open==this.value) { return false; } Ts[open].className="title02"; Ts[this.value].className="title01"; for(var i = 0 ; i < openState.length ; i++) { clearTimeout(openState[i]); clearTimeout(closeState[i]); } closeMe(open,this.value); //openMe(this.value); open = this.value; } } //直接打开层函数 function showDiv(id){ Ds[id].style.height=dH+"px"; Ds[open].style.height="0px"; open = id; }</script></body></html>
<!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"><head><title>点击弹出下拉列表效果，sky整理收集。</title><style type="text/css">body{ margin:10px; padding:10px;}body,td,div,span,li{ font-size:12px;}.title01,.title02{ color:#fff; font-weight:bold;}#DoorP{ border:12px solid #eee; width:150px; height:300px; padding:4px; background:#fff;}.title01{ width:100%; height:25px; background:#00ccff; cursor:pointer;}.title02{ width:100%; height:25px; background:#99cc00; cursor:pointer;}.content{ background:#eee; border-bottom:2px solid #fff; overflow:hidden; color:#666; padding-left:4px; padding-right:4px; line-height:18px;}</style><!--棕：#eee;蓝：#00ccff;绿：#99cc00;--></head><body><div id="DoorP"> <table> <tr> <td> 站长特效网 </td> </tr> </table> <div class="content"> zzjs 网页特效 广告代码 </div> <table> <tr> <td> 第二层信息 </td> </tr> </table> <div class="content"> ThirdteenDevil </div> <table> <tr> <td> 第三层信息 </td> </tr> </table> <div class="content"> devil13th </div></div><script type="text/javascript"> var open = 2;// 设置初始打开的层序号 var openState = new Array(); var closeState = new Array(); var dH = 220; function $$(id){ if(document.getElementById(id)) { return document.getElementById(id); } else { alert("没有找到!"); } } function $tag(id,tagName){ return $$(id).getElementsByTagName(tagName) } function closeMe(Cid,Oid){ var h = parseInt(Ds[Cid].style.height); //alert(h); if(h > 0) { h = h - Math.ceil(h/3); Ds[Cid].style.height = h+"px"; } else { openMe(Oid); clearTimeout(closeState[Cid]); return false; } closeState[Cid] = setTimeout("closeMe("+Cid+","+Oid+")"); } function openMe(Oid){ var h = parseInt(Ds[Oid].style.height); //alert(h); if(h < dH) { h = h + Math.ceil((dH-h)/3); Ds[Oid].style.height = h+"px"; } else { clearTimeout(openState[Oid]); return false; } openState[Oid] = setTimeout("openMe("+Oid+")"); } var Ds = $tag("DoorP","div"); var Ts = $tag("DoorP","table"); if(Ds.length != Ts.length) { alert("标题和内容数目不相同!"); } for(var i = 0 ; i < Ds.length ; i++) { if(i==open) { Ds[i].style.height = dH+"px"; Ts[i].className="title01"; } else { Ds[i].style.height = "0px"; Ts[i].className="title02"; } Ts[i].value = i; Ts[i].onclick = function(){ if(open==this.value) { return false; } Ts[open].className="title02"; Ts[this.value].className="title01"; for(var i = 0 ; i < openState.length ; i++) { clearTimeout(openState[i]); clearTimeout(closeState[i]); } closeMe(open,this.value); //openMe(this.value); open = this.value; } } //直接打开层函数 function showDiv(id){ Ds[id].style.height=dH+"px"; Ds[open].style.height="0px"; open = id; }</script></body></html>
[解决办法]
是 function $(id){ 与 jQuery 中的冲突了。
两个解决办法，一是将$ 方法改名，如楼上。
二是使用 jQuery.noConflict(); 让 jQuery 把$的控制权转移出来。
用 jQuery 来代替 $
------解决方案--------------------