做一个伸缩式菜单顺便讲jquery插件开发方式-优快云博客

本文介绍了一个简单的jQuery插件，用于实现网页上的伸缩式菜单功能。通过jQuery的易用性和强大的DOM操作能力，该插件能轻松地在用户交互时改变菜单的高度。

其实我一直奇怪为什么jquery的书籍还能卖出去。当两年前我发现jquery时，在网上随便搜索几篇文章，然后在把它的文档下下来一看，呵呵，差不多一切就在这里。不用特意去买任何书籍。

易用且功能强大，jquery真的让人爱不释手。

最近工作做一个功能。受制于原来某人的设计以及编程限制，总是想办法跳过去，不去理会原有的东西。此话不多讲。只是在想问题的过程中想到的伸缩式菜单。回家就随便试一试。

于是就有了如下，用jquery开发的jquery插件式伸缩菜单。其实超级简单。

<html>
<head>
<title>这只是一个测试</title>
<script src="jquery-1.3.2.min.js"></script>
<style>
.orger {
	position: relative;
	background-color: yellow;
	height: 77px;
	width: 200px;
	border: 1px solid blue;
	overflow: hidden;
}
.newer {
    position: relative;
	background-color: yellow;
	height: 190px;
	width: 200px;
	border: 1px solid blue;
	overflow: auto;
}
</style>

</head>

<body>

<div style="position: absolute; top: 10px; left: 500px;">
<div style="background-color: blue; color: white; text-align: center;"> 菜单 </div>
<div id="theMenu">
	<a href="http://www.baidu.cn" target="detail">百度</a><br>
	<a href="http://www.163.com" target="detail">163</a><br>
	<a href="http://www.126.com" target="detail">126</a><br>
	<a href="http://www.yahoo.com.cn" target="detail">雅虎</a><br>
	<a href="http://www.baidu.cn" target="detail">百度</a><br>
	<a href="http://www.163.com" target="detail">163</a><br>
	<a href="http://www.126.com" target="detail">126</a><br>
	<a href="http://www.yahoo.com.cn" target="detail">雅虎</a><br>
	<a href="http://www.baidu.cn" target="detail">百度</a><br>
	<a href="http://www.163.com" target="detail">163</a><br>
	<a href="http://www.126.com" target="detail">126</a><br>
	<a href="http://www.yahoo.com.cn" target="detail">雅虎</a><br>
	<a href="http://www.baidu.cn" target="detail">百度</a><br>
	<a href="http://www.163.com" target="detail">163</a><br>
	<a href="http://www.126.com" target="detail">126</a><br>
	<a href="http://www.yahoo.com.cn" target="detail">雅虎</a><br>
</div>

</div>

<div style="height: 100px;">
</div>

<div style="">
<iframe id="detail" name="detail" src="http://www.google.cn" style="width: 100%; height: 100%"></iframe>
</div>

</body>

<script>

jQuery.fn.extend({
  expendMenu: function() {
    return this.each(function() { 
        $(this).attr("class", "orger");
        //对鼠标进出进行事件响应
		$(this).mouseover(function() {
			$(this).attr("class", "newer");
		});
		$(this).mouseout(function() {
			$(this).attr("class", "orger");
		});
		//对菜单链接点击进行响应
		$(this).find("a").click(function() {
			$(this).parent().attr("class", "orger");
		});
	});
  },
});

$("#theMenu").expendMenu();

</script>

</html>

可以发现，开发一个jquery插件的过程是如此简单。jQuery.fn.extend() 中加入你想要的功能