写了一个jQuery插件
。
不知道是否代码还可以更短更精炼些。多多指点哟~
firstOpen属性是说明一开始默认打开第几个。
jQuery.fn.extend({
//start
ejqaccordion: function(options) {
var firstOpen=-1;
if(options)
firstOpen=(options.firstOpen!=null&&options.firstOpen>=0)?options.firstOpen:-1;
$(this).find("dd:visible").css("display","none");
if(firstOpen>=0)
$($(this).find("dd").get(firstOpen)).css("display","block");
$(this).find("dt").click(function(){
var vdd=$(this).parent().find("dd:visible");
var ndd=$(this).next();
vdd.slideUp('fast');
if(ndd.css("display")=="none")
ndd.slideDown('fast');
});
}
});
<dl id="accordion">
<dt>title1</dt>
<dd>i am 1</dd>
<dt>title2</dt>
<dd>i am 2</dd>
<dt>title3</dt>
<dd>i am 3</dd>
</dl>
调用代码:
$("#accordion").ejqaccordion({firstOpen:0});
分享到:
- 2008-06-26 10:17
- 浏览 1411
- 评论(0)
- 论坛回复 / 浏览 (0 / 3179)
- 查看更多
相关推荐
通常,你将找到一个示例HTML文件,其中包含如何创建accordion的基本结构,以及如何初始化和配置jQuery插件的代码。 在开发过程中,确保正确引用jQuery库和accordion插件的JavaScript文件,并且在HTML中创建适当的...
总结起来,jQuery Accordion是一种强大的交互设计工具,通过简单的API就能实现丰富的折叠效果。熟练掌握并应用它,可以显著提升网站或应用程序的用户体验。无论你是前端新手还是经验丰富的开发者,都值得将jQuery ...
jQuery Accordion是一款非常流行的JavaScript库,它主要用于创建交互式的折叠面板,常用于网站的导航菜单、FAQs或任何需要组织成可展开/折叠内容的场景。这个组件是jQuery UI库的一部分,提供了优雅的动画效果和易用...
jQuery accordion menu垂直展开收起的导航菜单,同样是扁平化的Bootstrap的风格,这款菜单同样带有动画展开效果,点击右侧的竖向节点线就可展开菜单项,修改菜单为中文内容即可。本菜单可作成问答式客服网页,标题...
jQuery Accordion是一款非常流行的JavaScript插件,用于创建可折叠的面板式布局,常用于构建菜单栏、信息分类或导航结构。在本示例中,我们将深入探讨如何利用jQuery Accordion来构建一个树形菜单栏框架。 首先,让...
jQuery Accordion的实现遵循jQuery插件模式,通过`.accordion()`方法初始化。源码中,这个方法首先检查DOM元素是否满足Accordion的结构,然后进行一系列的配置和事件绑定。这包括设置默认选项,如激活的面板、动画...
JQuery Accordion 是一个流行的jQuery插件,常被用于实现这种可折叠的、交互式的侧边栏菜单。这个应用修改教程将带你深入理解如何使用JQuery Accordion来创建一个支持无限子菜单的左侧导航系统。 首先,让我们了解...
此外,还可以结合其他jQuery插件,如Sliders或Dropdowns,来构建更丰富的交互式界面。 总结,jQuery Accordion插件以其简洁的API和强大的自定义能力,成为网页中创建折叠菜单的理想选择。通过理解和掌握它的基本...
本文将深入探讨一款名为Woco Accordion的jQuery手风琴插件,这是一款开源项目,凭借其简洁的设计和流畅的CSS3过渡动画,受到了开发者们的广泛欢迎。 Woco Accordion的核心是jQuery库,jQuery是一个功能强大、易于...
**知识点**: 易于集成到现有表单中的jQuery插件,提供自动补全功能,提高用户输入效率。 #### 4. FacebooklikeAutocomplete **知识点**: 类似于Facebook的AutoCompleter插件,基于jQuery开发,模仿社交网络的自动...
j-accordion.js 是 jQuery 的一个手风琴效果的插件,可自动对 hovered 条目进行扩展,并收缩其他项。可用做菜单用途。
jQuery Accordion 插件用于创建折叠菜单。它通常与嵌套的列表、定义列表或嵌套的 div 一起使用。选项用于指定结构、激活的元素和定制的动画。 该插件现在是 jQuery UI 的一部分,独立的版本不会再更新了。目前版本是...
总的来说,jQuery UI Accordion提供了一种简单而强大的方式来组织和展示网页内容。通过理解和定制其源码,开发者可以创造出符合特定需求的交互式折叠菜单,提升网站的用户体验。在实践中,你可能还会遇到如何与其他...
**jQuery Accordion 插件详解** 在Web开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果。其中,jQuery Accordion插件是jQuery UI库中的一个组件,用于创建交互式的折叠面板...
在网页开发中,jQuery UI 是一个非常流行的库,它提供了许多可重用的用户界面组件,包括我们今天要讨论的“Accordion(手风琴)”功能。jQuery UI Accordion 是一个垂直折叠的内容区域,允许用户逐个展开或收起内容...
- **插件库**:除了核心组件外,还有大量第三方插件,如Resizable、Accordion等,进一步扩展功能。 - **示例和教程**:丰富的示例代码和教学资源帮助开发者快速上手。 综上所述,"jQuery UI插件大全"是一个全面的...
**基于JQuery的Accordion菜单源码解析** Accordion菜单是一种常见的网页交互元素,它允许用户通过展开和折叠的方式查看和操作菜单项。在HTML页面中,使用JQuery库可以轻松实现这种效果,尤其对于构建可扩展的、易于...
jQuery手风琴效果插件j-accordion是网页交互设计中常用的一种组件,它将一系列内容按照垂直方向排列,用户可以逐个展开或关闭这些内容块,就像手风琴的伸缩一样,故得名“手风琴效果”。这种效果在网站的导航、FAQs...