其实我一直奇怪为什么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() 中加入你想要的功能
分享到：
相关推荐
总结来说，"jQuery页面左侧伸缩下拉导航菜单"是一个利用jQuery库和前端技术实现的交互功能，它结合了HTML、CSS和JavaScript，为用户提供了一种直观、动态的导航体验。通过理解并应用这些技术，开发者可以创建出更...
4. **jSide插件**: jSide是本资源中的核心组件，是一个专为jQuery设计的侧边栏菜单插件。它可能包含了实现滑动效果和多级菜单逻辑的JavaScript代码和CSS样式，用于快速构建响应式的侧边栏菜单。 5. **使用须知.txt*...
总的来说，“jquery左侧自动伸缩菜单”涉及到jQuery的基本使用，事件处理，动画效果，以及一些高级特性如插件开发和响应式设计。通过熟练掌握这些知识点，开发者可以创建出功能强大、用户体验优秀的网页导航菜单。在...
在介绍jQuery实现的动态伸缩导航菜单实例中，我们首先需要了解jQuery这个前端开发常用的JavaScript库。jQuery极大的简化了JavaScript编程，尤其在处理文档结构、事件处理、动画效果以及Ajax交互等方面提供了简便的...
jQuery伸缩型菜单是一种在网页开发中常用的交互式导航组件，它允许用户通过鼠标悬停或点击来展开或收缩子菜单项，为用户提供更直观、更便捷的浏览体验。这种菜单设计尤其适用于多层次的网站结构，能有效地组织大量...
综上所述，"jQuery多功能搜索框插件下拉菜单选择代码"是一个实用且灵活的前端组件，它结合了jQuery的便利性和Bootstrap的美学，为用户提供了一个高效、直观的搜索体验。通过学习和理解这个项目，开发者不仅可以掌握...
在本文中，我们将深入探讨如何使用jQuery来创建一个动态的左侧伸缩导航菜单。这个菜单是基于`jquery-1.8.3.min.js`库构建的，提供了多种交互效果，包括无缓动的展开和隐藏，以及两种不同类型的百叶窗效果。我们将...
本教程将深入探讨如何使用jQuery实现一个横向伸缩菜单导航，当鼠标悬停在导航项上时，其子菜单会向左滑动展开。 首先，我们需要了解jQuery的基本用法。jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理...
"js/jquery伸缩窗口菜单"是一个专为网上商城设计的组件，它允许用户在不同屏幕尺寸下方便地浏览和操作菜单。这种菜单设计尤其适用于响应式布局，能够根据窗口大小自动调整，确保在手机、平板电脑和桌面设备上都能...
手风琴插件是jQuery的一个常见应用，它为导航菜单提供了一种交互式的设计，使得用户可以点击某个部分展开或收起其他相关的内容。这种滑动伸缩的效果在网站导航、内容展示等方面非常实用，既节省空间又增加了用户体验...
本文将详细讲解如何使用jQuery创建一个伸缩的、垂直型的下拉菜单，以及与之相关的技术点。 首先，jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理和动画制作等任务。在实现下拉菜单时，jQuery可以提供...
本文将深入探讨如何使用jQuery创建一个可伸缩的侧边菜单，并分享一个自编的实例，旨在促进学习和交流。 首先，我们要理解侧边菜单的基本结构。在HTML中，通常会有一个包含多个链接或子菜单项的`<nav>`或`<ul>`元素...
总结来说，这个"jquery 菜单 伸缩"项目是一个使用jQuery和JavaScript实现的交互式菜单系统，它具有三个不同的视觉皮肤（Silver、Classic、Blue）和一个示例文件（menu11.html）。开发者通过编写`myMenu.js`实现了...
标题中的“伸缩式菜单_JS”指的是一个使用JavaScript和CSS技术实现的交互式菜单系统，这种菜单可以在用户操作时动态地展开或收缩，提供了一种高效且用户友好的导航方式。这种菜单通常用于网站或者应用的头部，帮助...
jQuery 是一个广泛使用的 JavaScript 库，提供了丰富的功能和简洁的 API，使得创建动态、交互式的菜单变得简单。在这个"jQuery 伸缩菜单（典型、简单的实例）"中，我们将深入探讨如何利用 jQuery 实现一种常见的菜单...
总结起来，jQuery可伸缩时间轴代码timeline插件是一个功能强大的前端工具，它结合了jQuery的灵活性和响应式设计的便利性，为开发者提供了一个高效构建交互式时间轴的解决方案。通过理解和应用这个插件，可以提升网站...
在本文中，我们将深入探讨如何使用jQuery库创建一个伸缩型菜单。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果以及AJAX交互等任务，使得前端开发更加高效。在这个实例中，我们将关注...
本篇文章将深入探讨如何利用jQuery这一强大的JavaScript库来创建一个竖向伸缩菜单。我们将从基本概念出发，逐步讲解实现这一功能所需的HTML结构、CSS样式以及jQuery脚本。 首先，我们需要了解伸缩菜单的基本结构。...
在JavaScript的世界里，jQuery是一个广泛使用的库，它简化了DOM操作、事件处理和Ajax交互等任务。本篇文章将深入探讨如何使用jQuery插件colResizable来实现表格列的拖拽伸缩功能，从而使用户可以根据需要调整表格的...