JS实现折叠菜单

最新推荐文章于 2023-09-19 09:43:27 发布
最新推荐文章于 2023-09-19 09:43:27 发布
阅读量2k 收藏
点赞数
分类专栏： Javascript 文章标签： border div class table function javascript

<SCRIPT LANGUAGE="JavaScript">
<!--
var bV=parseInt(navigator.appVersion);
var NS4=(document.layers) ? true : false;
var IE4=((document.all)&&(bV>=4))?true:false;
var ver4 = (NS4 || IE4) ? true : false;

function expandIt(){return}
function expandAll(){return}
function nomsg(){self.status="";}

if(ver4){
  isExpanded = false;

function getIndex(el) {
   ind = null;
   for (i=0; i<document.layers.length; i++) {
 whichEl = document.layers[i];
 if (whichEl.id == el) {
    ind = i;
    break;
 }
   }
   return ind;
}

function arrange() {
   nextY = document.layers[firstInd].pageY + document.layers[firstInd].document.height;
   for (i=firstInd+1; i<document.layers.length; i++) {
 whichEl = document.layers[i];
    if (whichEl.visibility != "hide") {
  whichEl.pageY = nextY;
  nextY += whichEl.document.height;
    }
   }
}

function initIt(){
   if (NS4) {
 for (i=0; i<document.layers.length; i++) {
    whichEl = document.layers[i];
  if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide";
 }
 arrange();
   }
   else {
 tempColl = document.all.tags("DIV");
 for (i=0; i<tempColl.length; i++) {
    if (tempColl(i).className == "child") tempColl(i).style.display = "none";
 }
   }
}

function expandIt(el) {
   if (!ver4) return;
   if (IE4) {expandIE(el)} else {expandNS(el)}
}

function expandIE(el) {
   whichEl = eval(el + "Child");
   whichIm = event.srcElement;

   if (whichEl.style.display == "none") {
 whichEl.style.display = "block";
 whichIm.src = "bullet-minus.gif";  
   }
   else {
 whichEl.style.display = "none";
 whichIm.src = "bullet-plus.gif";
   }
}

function expandNS(el) {
   whichEl = eval("document." + el + "Child");
   whichIm = eval("document." + el + "Parent.document.images['imEx']");
   if (whichEl.visibility == "hide") {
 whichEl.visibility = "show";
 whichIm.src = "bullet-minus.gif";
   }
   else {
 whichEl.visibility = "hide";
 whichIm.src = "bullet-plus.gif";
   }
   arrange();
}

function showAll() {
   for (i=firstInd; i<document.layers.length; i++) {
 whichEl = document.layers[i];
 whichEl.visibility = "show";
   }
}

function expandAll(isBot) {
   newSrc = (isExpanded) ? "bullet-plus.gif" : "bullet-minus.gif";

   if (NS4) {
        document.images["imEx"].src = newSrc;
 for (i=firstInd; i<document.layers.length; i++) {
  whichEl = document.layers[i];
  if (whichEl.id.indexOf("Parent") != -1) {
     whichEl.document.images["imEx"].src = newSrc;
  }
  if (whichEl.id.indexOf("Child") != -1) {
     whichEl.visibility = (isExpanded) ? "hide" : "show";
  }
 }

 arrange();
 if (isBot && isExpanded) scrollTo(0,document.layers[firstInd].pageY);
   }
   else {
 divColl = document.all.tags("DIV");
 for (i=0; i<divColl.length; i++) {
  if (divColl(i).className == "child") {
     divColl(i).style.display = (isExpanded) ? "none" : "block";
  }
 }
 imColl = document.images.item("imEx");
 for (i=0; i<imColl.length; i++) {
  imColl(i).src = newSrc;
 }
   }

   isExpanded = !isExpanded;
}

with (document) {
   write("<STYLE TYPE='text/css'>");
   if (NS4) {
 write(".parent {position:absolute; visibility:hidden}");
 write(".child {position:absolute; visibility:hidden}");
 write(".regular {position:absolute; visibility:hidden}")
   }
   else {
 write(".child {display:none}")
   }
   write("</STYLE>");
}

onload = initIt;
}
//-->
</SCRIPT>

</head>
<body bgcolor="#CEEB94">
<p align="center">
<br>
<!---------- begin OUTLINE ----------->
<!--上方全部展开/关闭-->  
<FONT STYLE="font-size: 9pt">  
<A HREF="#" onClick="expandAll(false); return false"><IMG NAME="imEx" SRC="bullet-plus.gif" WIDTH=9 HEIGHT=9 BORDER=0 ALT="展开/关闭全部">展开/关闭全部</A></FONT></p>
<DIV ID="elOneParent" CLASS=parent style="margin-left: 0.1px"> 
<div align="center">
  <center> 
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=126 height="15" style="border-collapse: collapse" bordercolor="#111111"><tr>
  <td class=label height="13" width="119"> 
<font color="#800000"> 
<A HREF="#" style="text-decoration:none"  onClick="expandIt('elOne'); return false"><IMG NAME="imEx" SRC="bullet-plus.gif" WIDTH=9 HEIGHT=9 BORDER=0 ALT="展开全部菜单">
<font color="#800000">完全中学</font></a></td></tr></table> 
  </center>
</div>
</DIV> 
<!--第一级子菜单--> 
<DIV ID="elOneChild" CLASS=child style="margin-left: 0.5px"> 
<div align="center">
  <center> 
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=126 style="border-collapse: collapse" bordercolor="#111111"> 
<tr><td width="120"> 
        &nbsp;&nbsp; 
        <A HREF="1.htm" target="data">肇庆市第一中学</A><BR> 
</td></tr><tr><td width="120"> 
        &nbsp;&nbsp; 
        <A HREF="2.htm" target="data">肇庆市第六中学</A><BR> 
</td></tr><tr><td width="120"> 
 &nbsp;&nbsp; 
 <a target="_blank" href="http://www.zq12z.com/">肇庆市第十二中学</a><BR> 
</td></tr><tr> 
      <td height="12" width="120"> &nbsp;&nbsp; <A HREF="http://www.zqdzzx.net" target="data">肇庆市端州中学</A></td> 
    </tr>
<tr><td width="120"> 
        &nbsp;&nbsp; <a target="_blank" href="http://www.cas.net.cn/">肇庆市加美学校</a><BR> 
</td></tr>   
    </table> 
  </center>
</div>
</DIV> 
 
<!--第二级父菜单--> 
<DIV ID="elTwoParent" CLASS=parent style="margin-left: 0.1px"> 
<div align="center">
  <center> 
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=126 style="border-collapse: collapse" bordercolor="#111111"><tr>
  <td class=label width="119"> 
<font color="#800000"> 
<A HREF="#" style="text-decoration:none"  onClick="expandIt('elTwo'); return false"><IMG NAME="imEx" SRC="bullet-plus.gif" WIDTH=9 HEIGHT=9 BORDER=0 ALT="展开全部菜单">
<font color="#800000">初级中学</font></a></td></tr></table> 
  </center>
</div>
</DIV> 
 
<!--第二级子菜单--> 
<DIV ID="elTwoChild" CLASS=child style="margin-left: 0.5px"> 
<div align="center">
  <center> 
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=126 style="border-collapse: collapse" bordercolor="#111111"> 
<tr><td width="119"> 
        &nbsp;&nbsp; 
        <A HREF="1.htm" target="data">肇庆市第四中学</A><BR> 
</td></tr><tr><td width="119"> 
        &nbsp;&nbsp; <a target="data" href="1.htm">肇庆市第五中学</a><BR> 
</td></tr><tr><td width="119"> 
 &nbsp;&nbsp; <a target="_blank" href="1.htm">肇庆市第七中学</a><BR> 
</td></tr><tr><td width="119"> 
 &nbsp;&nbsp; <a target="_blank" href="2.htm">肇庆市第八中学</a><BR> 
</td></tr>
<tr><td width="119"> 
 &nbsp;&nbsp; 
 <A HREF="4.htm" target="data">肇庆市大龙中学</A><BR> 
</td></tr>
<tr><td width="119"> 
 &nbsp;&nbsp; 
 <a target="_blank" href="http://www.gdzqsz.com/">肇庆市第十中学</a><BR> 
</td></tr>
<tr><td width="119"> 
 &nbsp;&nbsp; 
 <A HREF="4.htm" target="data">肇庆市黄岗中学</A><BR> 
</td></tr>
<tr><td width="119"> 
 &nbsp;&nbsp; 
 <A HREF="4.htm" target="data">肇庆市地质中学</A><BR>
</td></tr>
<tr><td width="119"> 
 &nbsp;&nbsp; 
 <A HREF="4.htm" target="data">肇庆市铁路中学</A><BR> 
</td></tr>
<tr><td width="119"> 
 &nbsp;&nbsp; 
 <A HREF="4.htm" target="data">肇庆市体育学校</A><BR>
</td></tr>


</table> 
  </center>
</div>
</DIV> 
 
<!--第三级父菜单--> 
<DIV ID="elThreeParent" CLASS=parent style="margin-left: 0.1px"> 
<div align="center">
  <center> 
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=126 style="border-collapse: collapse" bordercolor="#111111"><tr>
  <td class=label width="120"> 
<font color="#800000"> 
<A HREF="#" style="text-decoration:none"  onClick="expandIt('elThree'); return false"><IMG NAME="imEx" SRC="bullet-plus.gif" WIDTH=9 HEIGHT=9 BORDER=0 ALT="展开全部菜单">
<font color="#800000">东学区</font></a></td></tr></table> 
  </center>
</div>
</DIV> 
 
<!--第三级子菜单--> 
<DIV ID="elThreeChild" CLASS=child style="margin-left: 0.5px"> 
<div align="center">
  <center> 
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=126 style="border-collapse: collapse" bordercolor="#111111"> 
<tr><td width="122"> 
        &nbsp;&nbsp; 
        <A HREF="1.htm" target="data">肇庆市第一小学</A><BR>
</td></tr><tr><td width="122"> 
        &nbsp;&nbsp; <a target="data" href="http://218.15.244.29">肇庆市实验小学</a><BR>
</td></tr><tr><td width="122"> 
 &nbsp;&nbsp; <span style="font-size: 9pt"><a href="9.htm">肇庆市第九小学</a></span></td></tr><tr><td width="122"> 
 &nbsp;&nbsp; 
 <A HREF="3.htm" target="data">肇庆市第十三小学</A><BR>
</td></tr><tr><td width="122"> 
 &nbsp;&nbsp; 
 <A HREF="4.htm" target="data">肇庆市厚岗小学</A><BR>
</td></tr></table> 
  </center>
</div>
</DIV> 
 
<!--第四级父菜单--> 
<DIV ID="elFourParent" CLASS=parent style="margin-left: 0.1px"> 
<div align="center">
  <center> 
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=126 style="border-collapse: collapse" bordercolor="#111111"><tr>
  <td class=label width="115"> 
<font color="#800000"> 
<A HREF="#" style="text-decoration:none"  onClick="expandIt('elFour'); return false"><IMG NAME="imEx" SRC="bullet-plus.gif" WIDTH=9 HEIGHT=9 BORDER=0 ALT="展开全部菜单">
<font color="#800000">西学区</font></a></td></tr></table> 
  </center>
</div>
</DIV> 
 
<!--第四级子菜单--> 
<DIV ID="elFourChild" CLASS=child style="margin-left: 0.5px"> 
<div align="center">
  <center> 
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=126 style="border-collapse: collapse" bordercolor="#111111"> 
<tr><td width="125"> 
        <p align="center"> <span style="font-size: 9pt">&nbsp;&nbsp; <a href="http://www.bhyxx.net/" target="_blank">肇庆市百花园小学</a></span></td></tr> 
<tr><td width="125"> 
        &nbsp;&nbsp; <a href="1.htm"><span style="font-size: 9pt">肇</span>庆市第七小学</a><BR> 
</td></tr><tr><td width="125"> 
        &nbsp;&nbsp; <a href="2.htm">肇庆市第八小学</a><BR> 
</td></tr><tr><td width="125"> 
 &nbsp;&nbsp; <a href="3.htm">肇庆市第十一小学</a><BR> 
</td></tr><tr><td width="125"> 
 &nbsp;&nbsp; <a href="http://www.zq15.net" target="_blank">肇庆市第十五小学</a><BR>
</td></tr></table> 
  </center>
</div>
</DIV> 
 
<!--第五级父菜单--> 
<DIV ID="elFiveParent" CLASS=parent style="margin-left: 0.1px"> 
<div align="center">
  <center> 
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=126 style="border-collapse: collapse" bordercolor="#111111"><tr>
  <td class=label width="112"> 
<font color="#800000"> 
<A HREF="#" style="text-decoration:none"  onClick="expandIt('elFive'); return false"><IMG NAME="imEx" SRC="bullet-plus.gif" WIDTH=9 HEIGHT=9 BORDER=0 ALT="展开全部菜单">
<font color="#800000">北学区</font></a></font></td></tr></table> 
  </center>
</div>
</DIV> 

 
<!--第五级子菜单--> 
<DIV ID="elFiveChild" CLASS=child style="margin-left: 0.5px"> 
<div align="center">
  <center> 
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=126 style="border-collapse: collapse" bordercolor="#111111"> 
<tr><td width="120"> 
        &nbsp;&nbsp; <a target="_blank" href="/dzjyj/dcxy/zq4x.nsf/mlist">肇庆市第四小学</a><BR> 
</td></tr><tr><td width="120"> 
 &nbsp;&nbsp; <a target="_blank" href="http://liuxiao.kmip.net/">肇庆市第六小学</a><BR> 
</td></tr><tr><td width="120"> 
 &nbsp;&nbsp; <a href="3.htm">肇庆市第十四小学</a></td></tr><tr><td width="120"> 
 &nbsp;&nbsp; <a target="_blank" href="http://www.zq16.net/">肇庆市第十六小学</a></td></tr><tr><td width="120"> 
 &nbsp;&nbsp; <a href="1.htm">肇庆市第十七小学</a><BR>
</td></tr></table> 
  </center>
</div>
</DIV> 
 
<!--第六级父菜单--> 
<DIV ID="elSixParent" CLASS=parent style="margin-left: 0.1px"> 
<div align="center">
  <center> 
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=126 style="border-collapse: collapse" bordercolor="#111111"><tr>
  <td class=label width="109"> 
<font color="#800000"> 
<A HREF="#" style="text-decoration:none"  onClick="expandIt('elSix'); return false"><IMG NAME="imEx" SRC="bullet-plus.gif" WIDTH=9 HEIGHT=9 BORDER=0 ALT="展开全部菜单">
<font color="#800000">黄岗学区</font></a></td></tr></table> 
  </center>
</div>
</DIV> 
 
<!--第六级子菜单--> 
<DIV ID="elSixChild" CLASS=child style="margin-left: 0.5px"> 
<div align="center">
  <center> 
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=126 style="border-collapse: collapse" bordercolor="#111111" height="47"> 
<tr><td width="120"> 
        &nbsp;&nbsp; 
        <A HREF="1.htm" target="data">连接页面1</A><BR> 
</td></tr><tr><td width="120"> 
        &nbsp;&nbsp; 
        <A HREF="2.htm" target="data">连接页面2</A><BR> 
</td></tr><tr><td width="120"> 
 &nbsp;&nbsp; 
 <A HREF="3.htm" target="data">连接页面3</A><BR> 
</td></tr><tr><td width="120"> 
 &nbsp;&nbsp; 
 <A HREF="4.htm" target="data">连接页面4</A><BR>
</td></tr></table> 
  </center>
</div>
</DIV> 

<!--第七级父菜单--> 
<DIV ID="elSevenParent" CLASS=parent style="margin-left: 0.1px"> 
<div align="center">
  <center> 
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=126 style="border-collapse: collapse" bordercolor="#111111"><tr>
  <td class=label width="109"> 
<font color="#800000"> 
<A HREF="#" style="text-decoration:none"  onClick="expandIt('elSeven'); return false"><IMG NAME="imEx" SRC="bullet-plus.gif" WIDTH=9 HEIGHT=9 BORDER=0 ALT="展开全部菜单">
<font color="#800000">睦岗学区</font></a></td></tr></table> 
  </center>
</div>
</DIV> 
 
<!--第七级子菜单--> 
<DIV ID="elSevenChild" CLASS=child style="margin-left: 0.5px"> 
<div align="center">
  <center> 
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=126 style="border-collapse: collapse" bordercolor="#111111"> 
<tr><td width="120"> 
        &nbsp;&nbsp; 
        <a target="_blank" href="/dzjyj/dcxy/xyxx.nsf/mlist">肇庆市下瑶小学</a><BR> 
</td></tr><tr><td width="120"> 
        &nbsp;&nbsp; 
        <A HREF="2.htm" target="data">连接页面2</A><BR> 
</td></tr><tr><td width="120"> 
 &nbsp;&nbsp; 
 <A HREF="3.htm" target="data">连接页面3</A><BR> 
</td></tr><tr><td width="120"> 
 &nbsp;&nbsp; 
 <A HREF="4.htm" target="data">连接页面4</A><BR>
</td></tr></table> 
  </center>
</div>
</DIV> 
 
<!--第八级父菜单--> 
<DIV ID="elEightParent" CLASS=parent style="margin-left: 0.1px"> 
<div align="center">
  <center> 
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=126 style="border-collapse: collapse" bordercolor="#111111"><tr>
  <td class=label width="109"> 
<font color="#800000"> 
<A HREF="#" style="text-decoration:none"  onClick="expandIt('elEight'); return false"><IMG NAME="imEx" SRC="bullet-plus.gif" WIDTH=9 HEIGHT=9 BORDER=0 ALT="展开全部菜单">
<font color="#800000">幼儿园</font></a></font></td></tr></table> 
  </center>
</div>
</DIV> 
 
<!--第八级子菜单--> 
<DIV ID="elEightChild" CLASS=child style="margin-left: 0.5px"> 
<div align="center">
  <center> 
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=126 style="border-collapse: collapse" bordercolor="#111111"> 
<tr><td width="119"> 
        &nbsp;&nbsp; 
        <A HREF="1.htm" target="data">连接页面1</A><BR> 
</td></tr><tr><td width="119"> 
        &nbsp;&nbsp; 
        <A HREF="2.htm" target="data">连接页面2</A><BR> 
</td></tr><tr><td width="119"> 
 &nbsp;&nbsp; 
 <A HREF="3.htm" target="data">连接页面3</A><BR> 
</td></tr><tr><td width="119"> 
 &nbsp;&nbsp; 
 <A HREF="4.htm" target="data">连接页面4</A><BR>
</td></tr></table> 
  </center>
</div>
</DIV> 

 
lxzjsj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现的竖向折叠菜单代码
10-23
首先，HTML部分构建了整个竖向折叠菜单的结构。通过使用`div`元素，我们创建了一个导航栏`nav`，在这个导航栏中定义了多个标题和内容块。每个标题都是一个`div`元素，并且拥有一个唯一的`id`，以及一个`onclick`事件...
原生JS 实现可折叠树菜单效果
m0_64191440的博客
08-18 1432
5.在编辑器创建文件夹复制进去压缩下载后的图标代码。1.百度阿里图标库 “网上查了好多树菜单的写法。CSDN中竟然大部分收费。
js实现的折叠式菜单
wangyining070205的博客
06-11 4553
用js实现的折叠式菜单
【小河今学 | JavaScript】原生JS折叠菜单效果
LB_laber的博客
08-07 765
原生JS折叠菜单效果
JS实现树形菜单递归函数（折叠菜单）
最新发布
qingdouxiaohua的博客
09-19 423
树形菜单功能呢，他就像点菜单点开一项呢，他就出来这一项的内容，让小伙伴们看起来更舒服，分类明确。这是展示出来的版本（做的不太好！嘻嘻），接下来让我一起来看看代码把！（需要改正的地方轻请多多指点！）
JS三级可折叠菜单实现方法
10-22
JS三级可折叠菜单实现方法涉及了Web前端开发中的一个常见组件设计，该方法通常用于构建具有多层级结构的导航菜单。在这种菜单中，每一级菜单项都可以被展开或折叠，以展示其下属的子菜单项。用户通过点击菜单项来...
CSS 折叠的菜单实现代码
09-25
总的来说，这个CSS折叠菜单的实现是一个简洁而有效的解决方案，适用于那些希望在不依赖JavaScript的情况下创建交互式菜单的设计者。通过调整颜色、字体和布局，可以轻松地将其融入任何网站设计中，以提供优雅的导航...
js实现简单折叠、展开菜单的方法
10-23
本文详细介绍了使用JavaScript实现简单的网页折叠和展开菜单的...例如，可以加入动画效果来平滑地实现内容的展开和折叠，也可以使用现代的JavaScript框架和库（如React, Vue.js等）来进一步优化开发效率和代码的组织。
AngularJS折叠菜单实现方法示例
10-19
在深入分析AngularJS折叠菜单实现方法示例前，首先需要了解AngularJS框架的基本概念及其在构建Web应用中的作用。AngularJS是一个开源的JavaScript框架，由Google维护，它通过使用MVW（Model-View-Whatever）的设计...
js实现精致折叠菜单
07-30
<head> <SCRIPT src="images/tree_naviIndex.js" type=text/javascript></SCRIPT> <style> #mainLeft { FONT-SIZE: 12px; FLOAT: left; WIDTH: 218px; HEIGHT: auto; BACKGROUND-COLOR: #f2f6fb;padding:10px 0px 10px 5px;margin:0px; } #mainLeft li A { width:150px; COLOR: #263d4f; TEXT-DECORATION: none; overflow: hidden; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; } #mainLeft li A:hover { COLOR: #ff6500; TEXT-DECORATION: underline } #mainLeft UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none } #mainLeft UL LI { MARGIN: 0px; LIST-STYLE-TYPE: none } #mainLeft ul li:not(p) { clear: both; } #mainLeft ul li:not(p) a { max-width:130px; float: left; } #mainLeft ul li:not(p):after { content: "..."; float: left; width: 10px; padding-left:2px; color: #000; } </style> </head> <body> <DIV id=mainLeft> <DIV id=room0><IMG src="images/root.gif" align=absMiddle> <A href="http://bbs.big-bit.com/">技术论坛首页</A> </DIV> <DIV id=room5><IMG id=minus_5 onclick=showRoom(5); src="images/_minus1.gif" align=absMiddle><IMG id=folderOpen_5 src="images/folderopen.gif" align=absMiddle> <A onclick=showRoom(5); href="#">磁性元器件研发及应用技术区</A></DIV> <DIV id=file5 style="DISPLAY: block"> <UL> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=118">电源供应器技术</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=104">电子变压器技术</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=115">电感与线圈技术</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=116">磁性材料、配件、辅助材料技术</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=141">生产、品质、制程与企业管理</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line2.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=120">紧急求助区</A> </LI> </UL> </DIV> <DIV id=room10><IMG id=minus_10 onclick=showRoom(10); src="images/_minus1.gif" align=absMiddle><IMG id=folderOpen_10 src="images/folderopen.gif" align=absMiddle> <A onclick=showRoom(10); href="#">资料上传下载区</A></DIV> <DIV id=file10 style="DISPLAY: block"> <UL> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=106">电源供应器资料</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=117">电子变压器资料</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=119">电感与线圈资料</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=134">磁性材料与配件、辅助材料资料</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=135">安规、标准资料</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=142">生产、品质、制程与企业管理资料</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=144">磁性元器件应用领域资料</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line2.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=143">电子工程师必备知识</A> </LI> </UL> </DIV> <DIV id=room6><IMG src="images/_minus1.gif" name="minus_6" align=absMiddle id=minus_6 onclick=showRoom(6);><IMG src="images/folderopen.gif" name="folderOpen_6" align=absMiddle id=folderOpen_6> <A onclick=showRoom(6); href="#">原创精华帖展示区</A></DIV> <DIV id=file6 style="DISPLAY: block"> <UL> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=137">电源供应器精华<SPAN style="COLOR: #ff6500">[新]</SPAN></A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=138">电子变压器精华<SPAN style="COLOR: #ff6500">[新]</SPAN></A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=139">电感与线圈精华<SPAN style="COLOR: #ff6500">[新]</SPAN></A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line2.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=140" target=_blank>磁性材料精华<SPAN style="COLOR: #ff6500">[新]</SPAN></A> </LI> </UL> </DIV> <DIV id=room3><IMG id=plus_3 onclick=showRoom(3); src="images/_plus1.gif" align=absMiddle><IMG id=folder_3 src="images/folder.gif" align=absMiddle> <A onclick=showRoom(3); href="#">休闲灌水</A></DIV> <DIV id=file3 style="DISPLAY:none"> <UL> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=131">企业评说</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=128">市场讨论</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=110">职场心情</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=109">自由天空</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line2.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=133">供求合作</A> </LI> </UL> </DIV> <DIV id=room7><IMG src="images/_minus1.gif" name="minus_7" align=absMiddle id=minus_7 onclick=showRoom(7);><IMG src="images/folderopen.gif" name="folderOpen_7" width="16" height="16" align=absMiddle id=folderOpen_7> <A onclick=showRoom(7); href="#">站务管理</A></DIV> <DIV id=file7 style="DISPLAY: block"> <UL> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=43359">重要通知</A> </LI> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=38376">积分奖品兑换帖（修改）</A> </LI> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=32595">收集建议</A> </LI> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=38989">大比特论坛诚征版主！</A> </LI> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=44187">论坛版面调整和相关功能完善公告</A> </LI> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=49020">有关上传附件容量公告</A> </LI> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=37757">大比特论坛版主的权利与职责</A> </LI> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=43627">关于恶意刷分取消兑奖的公示</A> </LI> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line2.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=37758">版主奖罚制度</A> </LI> </UL> </DIV> <DIV id=file8> <UL> <LI><IMG src="images/_line2.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=32595">建议信箱区</A> </LI> </UL> </DIV> </DIV> </body> 实现二级树状菜单，兼容性好。
近50种伸缩滑动折叠菜单(js、css、div实现)，有滑动导航、工具条，下拉菜单等，是目前web设计中导航效果最全面的打包文件
07-25
近50种伸缩滑动折叠菜单(js、css、div实现)，有滑动导航、工具条，下拉菜单等，是目前web设计中导航效果最全面的打包文件
js实现可折叠展开的手风琴菜单效果
11-23
本文实例讲述了js实现可折叠展开的手风琴菜单效果。分享给大家供大家参考。具体如下： 这是一款可折叠展开的菜单，手风琴菜单，运用CSS与JavaScript技术实现的合拢与伸展的网页菜单，代码简洁，来自老外的代码作品，希望大家喜欢。 运行效果截图如下： 在线演示地址如下： http://demo.jb51.net/js/2015/js-hidden-show-sfq-style-menu-codes/ 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht
纯js+html菜单栏折叠，支持数据无限嵌套
12-19
数据格式支持数组形式 list = [ { id: 1, name: '测试', children: [ { id: 11, name: '测试1', children: [ { id: 112, name: 'cs1' } ] }, { id: 12, name: '测试2' } ] }]
JavaScript实现折叠式菜单
07-13
使用JavaScript作为html的脚本语言，实现网页中的折叠式菜单功能
JavaScript-实例-折叠菜单
深度安全实验室
12-05 756
JavaScript-实例-折叠菜单
JavaScript折叠菜单实现
煮酒客的博客
11-22 1316
- html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href
JS 实现伸缩菜单
Youareseeing的博客
06-24 1106
使用 三种方法 实现伸缩菜单直接放代码：html 代码和 style 代码 js代码（1）： js代码（2）： js代码（3）： 注：btns[i].onclick=function(){} 通过遍历给每个按钮赋予点击事件，再通过遍历找到你所点击的按钮的下标，最后通过divs[index].classList.toggle("open"); 改变每个 divs[index] 的样式，赋予 open 样式 最终实现伸缩菜单。效果图： 如果有不懂的，可以留言。...
【JavaScript】JS最简单的二级折叠菜单的实现方法（完整实例）
【敦厚的曹操】的专栏
01-13 1748
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> ...
js折叠菜单
の楓葉ぱ飄淚
12-06 435
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">       New Document    //菜单隐藏与显示  function SwitchMenu(obj){   if(document.getElementById){   var el
用js实现折叠菜单
05-26
好的，以下是一个简单的实现： HTML代码： ```html <div class="menu"> <div class="menu-header" onclick="toggleMenu()">点击展开菜单</div> <div class="menu-items" style="display:none;"> <ul> <li>菜单项1</li> <li>菜单项2</li> <li>菜单项3</li> </ul> </div> </div> ``` CSS代码： ```css .menu-header { background-color: #ccc; padding: 10px; cursor: pointer; } .menu-items { background-color: #eee; padding: 10px; } ``` JavaScript代码： ```js function toggleMenu() { var menuItems = document.querySelector('.menu-items'); if (menuItems.style.display === 'none') { menuItems.style.display = 'block'; } else { menuItems.style.display = 'none'; } } ``` 这个实现中，当点击菜单头部时，通过切换菜单项的 `display` 样式属性来实现菜单的展开和折叠。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值