实现JavaScript菜单

有时间我们会需要一个菜单,可以折叠某些不需要显示的部分。类似这样的代码我们可以通过javascript代码来实现。
基本的原理就是动态的去改变一个div的css样式display。控制让它是否显示。
当display="none"时它将不可见。而等于"" 时可见。

效果如下:
<script language="JavaScript"> </script>
Root

具体的代码如下:

 <script language="JavaScript">
 
<!--
  
function change(f){
   
var e;
   e 
= document.getElementById(f);//通过id获取指定的元素
   e.style.display = e.style.display == "none" ? "" : "NONE";
  }

 
//-->
 </script>

 
<div onclick=change("child")>Root</div>
 
<div id="child" style="DISPLAY:none">
  child 
1 <br>
  child 
2 <br>
  child 
3 <br>
 
</div>

 从这里我们还可以推敲出来两点:
1. 是否其它的html元素也具有这样的属性。例如table,span,答案是肯定的。
2. style属性封装了html元素的css样式。通过这里我们还可以访问到其它的css样式。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章