⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 tu9.10.htm

📁 一部非常好的javaScript教程
💻 HTM
字号:
🔍 
<HTML>
<HEAD>
<TITLE>动态折叠菜单</TITLE>
</HEAD>
<STYLE>
<!--
    BODY {font-size:12pt}
    A {font-size:10pt}
    .red {color:red}
    .menu{color:blue; cursor:hand}
    .indent {margin-left:0.3in}
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function menuChange() {
  var src;
  var subId;
  src = window.event.srcElement;
  if (src.className == "menu") {   //判断是否单击了某菜单项。
     subId = "sub" + src.id;
     if (document.all(subId).style.display == "none") {  /* 如果没有显示子菜单，则显示。*/
        document.all(subId).style.display = "";
     } else {  //如果已经显示子菜单，则折叠。
        document.all(subId).style.display = "none";
     }
  }
}
//-->
</SCRIPT>
<BODY onClick="menuChange();">
<H3>单击一个菜单项则可以打开或折叠菜单……</H3>
<SPAN ID="menu1" CLASS="menu">+ 菜单项 1</SPAN>  <!-- 定义菜单 -->
<DIV ID=submenu1 STYLE="display:None">              <!-- 定义子菜单-->
	<DIV CLASS="indent">                            <!--定义缩进-->
	<A href="javascript:void(0)" onmouseover = "this.className = 'red'" 
         onmouseout = "this.className = ';'">子菜单项 1</A><BR>
<!-- 对象的 className 属性用于访问定义的样式类 -->
	<A href="javascript:void(0)" onmouseover = "this.className = 'red'" 
         onmouseout = "this.className = ';'">子菜单项 2</A><BR>
	<A href="javascript:void(0)" onmouseover = "this.className = 'red'" 
         onmouseout = "this.className = ';'">子菜单项 3</A><BR>
	<A href="javascript:void(0)" onmouseover = "this.className = 'red'" 
         onmouseout = "this.className = ';'">子菜单项 4</A><BR>
	</DIV>
</DIV>
<BR>
<SPAN ID="menu2" CLASS="menu">+ 菜单项 2</SPAN>
<DIV ID=submenu2 STYLE="display:None">
	<DIV CLASS="indent">
	<A href="javascript:void(0)" onmouseover = "this.className = 'red'" 
         onmouseout = "this.className = ';'">子菜单项 1</A><BR>
	<A href="javascript:void(0)" onmouseover = "this.className = 'red'" 
         onmouseout = "this.className = ';'">子菜单项 2</A><BR>
	<A href="javascript:void(0)" onmouseover = "this.className = 'red'" 
         onmouseout = "this.className = ';'">子菜单项 3</A><BR>
	<A href="javascript:void(0)" onmouseover = "this.className = 'red'" 
         onmouseout = "this.className = ';'">子菜单项 4</A><BR>
	<A href="javascript:void(0)" onmouseover = "this.className = 'red'" 
         onmouseout = "this.className = ';'">子菜单项 5</A>
	</DIV>
</DIV>
<BR>
<SPAN ID="menu3" CLASS="menu">+ 菜单项 3</SPAN>
<DIV ID=submenu3 STYLE="display:None">
	<DIV CLASS="indent">
	<A href="javascript:void(0)" onmouseover = "this.className = 'red'" 
         onmouseout = "this.className = ';'">子菜单项 1</A><BR>
	<A href="javascript:void(0)" onmouseover = "this.className = 'red'" 
         onmouseout = "this.className = ';'">子菜单项 2</A><BR>
	<A href="javascript:void(0)" onmouseover = "this.className = 'red'" 
         onmouseout = "this.className = ';'">子菜单项 3</A><BR>
	<A href="javascript:void(0)" onmouseover = "this.className = 'red'" 
         onmouseout = "this.className = ';'">子菜单项 4</A><BR>
	<A href="javascript:void(0)" onmouseover = "this.className = 'red'" 
         onmouseout = "this.className = ';'">子菜单项 5</A>
	</DIV>
</DIV>
</BODY>
</HTML>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -