用JavaScript创建可折叠导航菜单

17. February 2010, 21:46 UhrTechniquesSoleilNeon6 comments (492 views)

有时候为了避免页面上出现过多的元素可以将部分元素隐藏起来，等到需要的时候通过鼠标点击展开相应的元素。当导航菜单项目过多的时候就可以采用这种方法。

首先，需要创建HTML列表，代码如下：

Links

接着在HTML页面的<head>和</head>标签之间添加下面的JavaScript代码，原理是通过切换元素的css的display属性来控制显示或隐藏。

function collapse(zap){
	if(document.getElementById){
		var abra=document.getElementById(zap).style;
		if(abra.display=="block"){
			abra.display="none";
		}else{
			abra.display="block";
		}
		return false;
	}else{
		return true;
	}
}

最后把给标题添加a元素，添加onclick事件，当点击鼠标的时候就是触发事件，调用定义好的函数：

Links

这样就完成了简单的可折叠菜单，可以自己添加相应的CSS样式。

Related Posts

6 comments:

  1. Firm, 18. February 2010, 13:12

    JavaScript创建导航俺一直很喜欢这么做

    Reply

    SoleilNeon Reply:
    February 19th, 2010 at 16:18

    我也喜欢，这样效果要比纯HTML好。

    Reply

     
  2. 羽中, 19. February 2010, 11:31

    SoleilNeon熟悉jquery吗？有绝招别忘了分享分享:)

    Reply

    SoleilNeon Reply:
    February 19th, 2010 at 16:19

    刚准备学JQuery，本来想学Dojo的，后来发现JQuery好学点。
    我有绝招的话肯定会拿出来分享的

    Reply

     
  3. smigoo, 20. February 2010, 14:03

    来学习～～～～

    Reply

     
  4. Amos, 30. March 2011, 14:36

    這個不錯，很簡單易學~

    Reply

     

Write a comment: