如何实现展开/收缩的菜单? http://fason.nease.net/有比较cool的例子,代码右键查看 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><Script Language="JavaScript">//Name﹕無限層樹狀//Design:LiuZXIT//OverTime:2003/3/19//Note:在IE5.i上測試通過var strStyle='<style type="text/css">'strStyle+='span.SelectIng{color:#ff00ff;border:solid 1pt #666666;padding:0.5pt;height:4px;background-color:#cccccc;}'strStyle+='span.NoSelect{color:#000084;border:solid 1pt #ffffff;padding:0.5pt;height:4px;background-color:#ffffff;}'strStyle+='span.SelectEd{color:#D02090;border:solid 1pt #888888;padding:0.5pt;height:4px;background-color:#f3f3f3;}'strStyle+='</style>'document.write(strStyle)var myRs=new Array(), selectItem;function compare(a,b) {return parseInt(a[1]) - parseInt(b[1])}function InsertItem(s){myRs[myRs.length++] = s.split(/,/);}function ExCloAll(n){ var d=document.all('0'), e=d.all.tags('div') for (i=0;i<e.length;i++)e[i].style.display=(n==1?'block':'none') e=d.all.tags('p') for (i=0;i<e.length;i++){if(ChkExist(e[i].children[1].value))e[i].children[0].innerText=(n==1?'- ':'+ ')}}function ExCloItem(){ var c,e=event.srcElement, p=e.parentElement.children if(e.myHref!=''){ alert((e.myTarget!=''?e.myTarget:'window')+'.location='+e.myHref) //要改成連接到某頁只需把alert改成eval即可 //如果你不想觸發展合動作只需在這里加return; } else{window.status='no href'}; if(selectItem!=null)selectItem.className='NoSelect'; e.className='SelectEd' selectItem=event.srcElement; if(c=document.all(e.value)){ p[0].innerText=(p[0].innerText=='+ '?'- ':'+ ') c.style.display=(c.style.display=='none'?'block':'none') }else{p[0].innerText='- '}}function ExCloItem2(){ var c,e=event.srcElement, p=e.parentElement.children if(c=document.all(p[1].value)){ e.innerText=(e.innerText=='+ '?'- ':'+ ') c.style.display=(c.style.display=='block'?'none':'block') }else e.innerText='- '}function OutItem(){ var e=event.srcElement if(selectItem != '')e.className=(selectItem==e?'SelectEd':'NoSelect') else e.className='NoSelect'}function ChkExist(n){ n=parseInt(n) if((n<myRs[0][1])||(n>myRs[myRs.length-1][1]))return false var a,b,c,x=0, y=parseInt(myRs.length/2), z=myRs.length-1 while((x!=y)&&(y!=z)){ a=myRs[x][1], b=myRs[y][1], c=myRs[z][1] if(n==a||n==b||n==c)return true if(n>b)x=y; else z=y;y=parseInt(x+z); y=parseInt((x+z)/2); } return false}function drawTree(n){ if(n==0){ myRs.sort(compare) document.write('<p style="font:10pt;cursor:hand;"><span onclick="ExCloAll(1)">全部展開</span> <span onclick="ExCloAll(0)">全部合攏</span></p>') } if (ChkExist(n)!=true)return document.write('<div id="'+n+'" style="font:10pt;cursor:hand;'+(n!=0?'position:relative;left:20;display:none;':'')+'">') for(var i=0;i<myRs.length;i++){ if (parseInt(myRs[i][1])>n)break; if (myRs[i][1]==n){ document.write('<p style="margin:0pt;"><span style="vertical-align:top;" onclick="ExCloItem2()">'+(ChkExist(myRs[i][0])?'+ ':'- ')+'</span>') document.write('<span onclick="ExCloItem()" myHref="'+(myRs[i].length>3?myRs[i][3]:'')+'" myTarget="' + (myRs[i].length>4?myRs[i][4]:'') +'" value="'+myRs[i][0]+'" class="NoSelect" onmouseout="OutItem()" onmouseover="this.className=\'SelectIng\'">'+myRs[i][2]+'</span></p>') if (myRs[i].length >3)document.write('</a>'); drawTree(myRs[i][0]) } } document.write('</div>')}InsertItem('1,0,根目錄1')InsertItem('11,1,子目錄1')InsertItem('111,11,孫目錄1,b.htm,parent.frmMain')InsertItem('1111,111,曾孫目錄,c.htm,top')InsertItem('11111,1111,玄孫目錄,d.htm,window')InsertItem('12,1,子目錄2')InsertItem('2,0,根目錄2')InsertItem('21,2,子目錄A,d.htm')InsertItem('22,2,子目錄B')InsertItem('3,0,根目錄3')InsertItem('31,3,子目錄C,e.htm')InsertItem('311,31,子目錄D,e.htm')drawTree(0)</Script></HEAD><BODY></BODY></HTML> <script language="JavaScript"><!--/*树型菜单原理*/function Expand(o,n){ var io=o.open=="false" o.innerHTML=io?"-":"+" document.getElementById("Child"+n).style.display=io?"":"none" o.open=io?"true":"false"}//--></script><div><a href="" onclick="Expand(this,0);return(false)" open="false">+</a> <span>主菜单</span></div><div id="Child0" style="display:none;padding-left:14"><div><span>#</span><span>子菜单</span></div><div><span>#</span><span>子菜单</span></div><div><span>#</span><span>子菜单</span></div></div> e....:)再来两个<div></div> 吧只有一个看不到 全部展开 和 全部收缩:Pthanks~ <script language="JavaScript"><!--/*树型菜单原理*/function Expand(o){ var io=o.open=="false" var n=o.uid o.innerHTML=io?"-":"+" document.getElementById("Child"+n).style.display=io?"":"none" o.open=io?"true":"false"}function ExpandAll(flag){ var fld=document.getElementsByName("folder") for(i=0;i<fld.length;i++){ fld[i].open=flag?"false":"true" Expand(fld[i]) }}//--></script><a href="javascript:ExpandAll(true)">全部展开</a><a href="javascript:ExpandAll(false)">全部合拢</a><div><a href="" name="folder" uid=0 onclick="Expand(this);return(false)" open="false">+</a> <span>主菜单</span></div><div id="Child0" style="display:none;padding-left:14"><div><span>#</span><span>子菜单</span></div><div><span>#</span><span>子菜单</span></div><div><span>#</span><span>子菜单</span></div></div><div><a href="" name="folder" uid=1 onclick="Expand(this);return(false)" open="false">+</a> <span>主菜单</span></div><div id="Child1" style="display:none;padding-left:14"><div><span>#</span><span>子菜单</span></div><div><span>#</span><span>子菜单</span></div><div><span>#</span><span>子菜单</span></div></div> 一个jquery事件冒泡问题,兄弟速进,点亮我心中的谜团吧~~!!! 求一正则表达式 怎样实现网页真正的全屏 关于页面回退的问题 关于解除事件绑定 熟悉CSS和JS的请帮我看看float和scrollHeight的问题 如何写一个计算时间差的Function js中如何将找到的控件转化为对定对象,js高手请进 请教高手,如何实现禁止连续点击同一链接,在线等。。。 在当前页面中可不可以刷新制定的页面? 请问如何实现在select中当触发onchange事件的时候可以改变它旁边的text的value值? SetTimeOut为什么会越来越快?
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<Script Language="JavaScript">
//Name﹕無限層樹狀
//Design:LiuZXIT
//OverTime:2003/3/19
//Note:在IE5.i上測試通過var strStyle='<style type="text/css">'
strStyle+='span.SelectIng{color:#ff00ff;border:solid 1pt #666666;padding:0.5pt;height:4px;background-color:#cccccc;}'
strStyle+='span.NoSelect{color:#000084;border:solid 1pt #ffffff;padding:0.5pt;height:4px;background-color:#ffffff;}'
strStyle+='span.SelectEd{color:#D02090;border:solid 1pt #888888;padding:0.5pt;height:4px;background-color:#f3f3f3;}'
strStyle+='</style>'
document.write(strStyle)var myRs=new Array(), selectItem;
function compare(a,b) {return parseInt(a[1]) - parseInt(b[1])}
function InsertItem(s){myRs[myRs.length++] = s.split(/,/);}function ExCloAll(n){
var d=document.all('0'), e=d.all.tags('div')
for (i=0;i<e.length;i++)e[i].style.display=(n==1?'block':'none')
e=d.all.tags('p')
for (i=0;i<e.length;i++){if(ChkExist(e[i].children[1].value))e[i].children[0].innerText=(n==1?'- ':'+ ')}
}function ExCloItem(){
var c,e=event.srcElement, p=e.parentElement.children
if(e.myHref!=''){
alert((e.myTarget!=''?e.myTarget:'window')+'.location='+e.myHref) //要改成連接到某頁只需把alert改成eval即可
//如果你不想觸發展合動作只需在這里加return;
}
else{window.status='no href'};
if(selectItem!=null)selectItem.className='NoSelect';
e.className='SelectEd'
selectItem=event.srcElement;
if(c=document.all(e.value)){
p[0].innerText=(p[0].innerText=='+ '?'- ':'+ ')
c.style.display=(c.style.display=='none'?'block':'none')
}else{p[0].innerText='- '}
}
function ExCloItem2(){
var c,e=event.srcElement, p=e.parentElement.children
if(c=document.all(p[1].value)){
e.innerText=(e.innerText=='+ '?'- ':'+ ')
c.style.display=(c.style.display=='block'?'none':'block')
}else e.innerText='- '
}function OutItem(){
var e=event.srcElement
if(selectItem != '')e.className=(selectItem==e?'SelectEd':'NoSelect')
else e.className='NoSelect'
}function ChkExist(n){
n=parseInt(n)
if((n<myRs[0][1])||(n>myRs[myRs.length-1][1]))return false
var a,b,c,x=0, y=parseInt(myRs.length/2), z=myRs.length-1
while((x!=y)&&(y!=z)){
a=myRs[x][1], b=myRs[y][1], c=myRs[z][1]
if(n==a||n==b||n==c)return true
if(n>b)x=y;
else z=y;y=parseInt(x+z);
y=parseInt((x+z)/2);
}
return false
}function drawTree(n){
if(n==0){
myRs.sort(compare)
document.write('<p style="font:10pt;cursor:hand;"><span onclick="ExCloAll(1)">全部展開</span> <span onclick="ExCloAll(0)">全部合攏</span></p>')
}
if (ChkExist(n)!=true)return
document.write('<div id="'+n+'" style="font:10pt;cursor:hand;'+(n!=0?'position:relative;left:20;display:none;':'')+'">')
for(var i=0;i<myRs.length;i++){
if (parseInt(myRs[i][1])>n)break;
if (myRs[i][1]==n){
document.write('<p style="margin:0pt;"><span style="vertical-align:top;" onclick="ExCloItem2()">'+(ChkExist(myRs[i][0])?'+ ':'- ')+'</span>')
document.write('<span onclick="ExCloItem()" myHref="'+(myRs[i].length>3?myRs[i][3]:'')+'" myTarget="' + (myRs[i].length>4?myRs[i][4]:'') +'" value="'+myRs[i][0]+'" class="NoSelect" onmouseout="OutItem()" onmouseover="this.className=\'SelectIng\'">'+myRs[i][2]+'</span></p>')
if (myRs[i].length >3)document.write('</a>');
drawTree(myRs[i][0])
}
}
document.write('</div>')
}InsertItem('1,0,根目錄1')
InsertItem('11,1,子目錄1')
InsertItem('111,11,孫目錄1,b.htm,parent.frmMain')
InsertItem('1111,111,曾孫目錄,c.htm,top')
InsertItem('11111,1111,玄孫目錄,d.htm,window')
InsertItem('12,1,子目錄2')
InsertItem('2,0,根目錄2')
InsertItem('21,2,子目錄A,d.htm')
InsertItem('22,2,子目錄B')
InsertItem('3,0,根目錄3')
InsertItem('31,3,子目錄C,e.htm')
InsertItem('311,31,子目錄D,e.htm')
drawTree(0)
</Script></HEAD><BODY></BODY>
</HTML>
<!--
/*树型菜单原理*/
function Expand(o,n){
var io=o.open=="false"
o.innerHTML=io?"-":"+"
document.getElementById("Child"+n).style.display=io?"":"none"
o.open=io?"true":"false"
}
//-->
</script>
<div><a href="" onclick="Expand(this,0);return(false)" open="false">+</a> <span>主菜单</span></div>
<div id="Child0" style="display:none;padding-left:14">
<div><span>#</span><span>子菜单</span></div>
<div><span>#</span><span>子菜单</span></div>
<div><span>#</span><span>子菜单</span></div>
</div>
:)
再来两个<div></div> 吧只有一个看不到 全部展开 和 全部收缩:Pthanks~
<!--
/*树型菜单原理*/
function Expand(o){
var io=o.open=="false"
var n=o.uid
o.innerHTML=io?"-":"+"
document.getElementById("Child"+n).style.display=io?"":"none"
o.open=io?"true":"false"
}
function ExpandAll(flag){
var fld=document.getElementsByName("folder")
for(i=0;i<fld.length;i++){
fld[i].open=flag?"false":"true"
Expand(fld[i])
}
}
//-->
</script>
<a href="javascript:ExpandAll(true)">全部展开</a>
<a href="javascript:ExpandAll(false)">全部合拢</a>
<div><a href="" name="folder" uid=0 onclick="Expand(this);return(false)" open="false">+</a> <span>主菜单</span></div>
<div id="Child0" style="display:none;padding-left:14">
<div><span>#</span><span>子菜单</span></div>
<div><span>#</span><span>子菜单</span></div>
<div><span>#</span><span>子菜单</span></div>
</div>
<div><a href="" name="folder" uid=1 onclick="Expand(this);return(false)" open="false">+</a> <span>主菜单</span></div>
<div id="Child1" style="display:none;padding-left:14">
<div><span>#</span><span>子菜单</span></div>
<div><span>#</span><span>子菜单</span></div>
<div><span>#</span><span>子菜单</span></div>
</div>