`
ericxu131
  • 浏览: 188386 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

自制简单的JQuery accordion插件

阅读更多
写了一个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});
分享到:
评论

相关推荐

    jQuery accordion插件:一个可折叠的面板【菜单】特效.rar

    通常,你将找到一个示例HTML文件,其中包含如何创建accordion的基本结构,以及如何初始化和配置jQuery插件的代码。 在开发过程中,确保正确引用jQuery库和accordion插件的JavaScript文件,并且在HTML中创建适当的...

    jquery accordion 菜单折叠效果

    总结起来,jQuery Accordion是一种强大的交互设计工具,通过简单的API就能实现丰富的折叠效果。熟练掌握并应用它,可以显著提升网站或应用程序的用户体验。无论你是前端新手还是经验丰富的开发者,都值得将jQuery ...

    jquery Accordion 收缩展开的多级导航

    jQuery Accordion是一款非常流行的JavaScript库,它主要用于创建交互式的折叠面板,常用于网站的导航菜单、FAQs或任何需要组织成可展开/折叠内容的场景。这个组件是jQuery UI库的一部分,提供了优雅的动画效果和易用...

    jQuery accordion menu垂直展开收起的导航菜单.rar

    jQuery accordion menu垂直展开收起的导航菜单,同样是扁平化的Bootstrap的风格,这款菜单同样带有动画展开效果,点击右侧的竖向节点线就可展开菜单项,修改菜单为中文内容即可。本菜单可作成问答式客服网页,标题...

    jquery accordion tree 菜单栏 框架示例

    jQuery Accordion是一款非常流行的JavaScript插件,用于创建可折叠的面板式布局,常用于构建菜单栏、信息分类或导航结构。在本示例中,我们将深入探讨如何利用jQuery Accordion来构建一个树形菜单栏框架。 首先,让...

    jquery.accordion源码

    jQuery Accordion的实现遵循jQuery插件模式,通过`.accordion()`方法初始化。源码中,这个方法首先检查DOM元素是否满足Accordion的结构,然后进行一系列的配置和事件绑定。这包括设置默认选项,如激活的面板、动画...

    左侧菜单 jquery accordion的应用修改

    JQuery Accordion 是一个流行的jQuery插件,常被用于实现这种可折叠的、交互式的侧边栏菜单。这个应用修改教程将带你深入理解如何使用JQuery Accordion来创建一个支持无限子菜单的左侧导航系统。 首先,让我们了解...

    jquery菜单展开插件(jqueryaccordion)

    此外,还可以结合其他jQuery插件,如Sliders或Dropdowns,来构建更丰富的交互式界面。 总结,jQuery Accordion插件以其简洁的API和强大的自定义能力,成为网页中创建折叠菜单的理想选择。通过理解和掌握它的基本...

    jQuery手风琴插件WocoAccordion.zip

    本文将深入探讨一款名为Woco Accordion的jQuery手风琴插件,这是一款开源项目,凭借其简洁的设计和流畅的CSS3过渡动画,受到了开发者们的广泛欢迎。 Woco Accordion的核心是jQuery库,jQuery是一个功能强大、易于...

    jQuery菜单插件j-accordion.js.zip

    j-accordion.js 是 jQuery 的一个手风琴效果的插件,可自动对 hovered 条目进行扩展,并收缩其他项。可用做菜单用途。

    jQuery Accordion

    jQuery Accordion 插件用于创建折叠菜单。它通常与嵌套的列表、定义列表或嵌套的 div 一起使用。选项用于指定结构、激活的元素和定制的动画。 该插件现在是 jQuery UI 的一部分,独立的版本不会再更新了。目前版本是...

    jquery UI accordion 菜单折叠

    总的来说,jQuery UI Accordion提供了一种简单而强大的方式来组织和展示网页内容。通过理解和定制其源码,开发者可以创造出符合特定需求的交互式折叠菜单,提升网站的用户体验。在实践中,你可能还会遇到如何与其他...

    基于jQuery实现Accordion手风琴自定义插件

    主要为大家详细介绍了基于jQuery实现Accordion手风琴自定义插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    jquery.accordion.js:Jquery 手风琴插件

    **jQuery Accordion 插件详解** 在Web开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果。其中,jQuery Accordion插件是jQuery UI库中的一个组件,用于创建交互式的折叠面板...

    jquery ui accordion手风琴插件带动画的竖直手风琴

    在网页开发中,jQuery UI 是一个非常流行的库,它提供了许多可重用的用户界面组件,包括我们今天要讨论的“Accordion(手风琴)”功能。jQuery UI Accordion 是一个垂直折叠的内容区域,允许用户逐个展开或收起内容...

    jquery ui 插件大全

    - **插件库**:除了核心组件外,还有大量第三方插件,如Resizable、Accordion等,进一步扩展功能。 - **示例和教程**:丰富的示例代码和教学资源帮助开发者快速上手。 综上所述,"jQuery UI插件大全"是一个全面的...

    基于JQuery做的Accordion菜单源程

    **基于JQuery的Accordion菜单源码解析** Accordion菜单是一种常见的网页交互元素,它允许用户通过展开和折叠的方式查看和操作菜单项。在HTML页面中,使用JQuery库可以轻松实现这种效果,尤其对于构建可扩展的、易于...

    【Jquery经典特效21】jQuery手风琴效果插件j-accordion

    jQuery手风琴效果插件j-accordion是网页交互设计中常用的一种组件,它将一系列内容按照垂直方向排列,用户可以逐个展开或关闭这些内容块,就像手风琴的伸缩一样,故得名“手风琴效果”。这种效果在网站的导航、FAQs...

    jQuery Accordion 可左右滑动展开、折叠的滑动门.rar

    jQuery Accordion 可左右滑动展开、折叠的滑动门,兼容各大浏览器,外观简洁时尚,鼠标点击时各个菜单项展开,用在网页上是很漂亮的效果。本效果基于jquery实现,可扩展为滑动门等常见的网页特效。

    jquery Accordion 多级导航菜单 可收缩展开.rar

    jquery Accordion 收缩展开的多级导航,这是一种比较常见的形式了,点击一级菜单,二级菜单随即展开,目前仅支持两级,更多级需要自己扩展,这需要你认真阅读代码以及了解jQuery类库,本菜单从老外网站获得,欢迎...

Global site tag (gtag.js) - Google Analytics