`

使用jQuery打造手风琴式的折叠效果

 
阅读更多
Js代码 
  1. var accordion = {  
  2.      init: function(){  
  3.            var $container = $('#accordion');  
  4.            $container.find('li:not(:first) .details').hide();  
  5.            $container.find('li:first').addClass('active');  
  6.            $container.on('click','li a',function(e){  
  7.                   e.preventDefault();  
  8.                   var $this = $(this).parents('li');  
  9.                   if($this.hasClass('active')){  
  10.                          if($('.details').is(':visible')) {  
  11.                                 $this.find('.details').slideUp();  
  12.                          } else {  
  13.                                 $this.find('.details').slideDown();  
  14.                          }  
  15.                   } else {  
  16.                          $container.find('li.active .details').slideUp();  
  17.                          $container.find('li').removeClass('active');  
  18.                          $this.addClass('active');  
  19.                          $this.find('.details').slideDown();  
  20.                   }  
  21.            });  
  22.      }  
  23. };  

转自:http://www.iteye.com/news/28047

分享到:
评论

相关推荐

    jquery手风琴效果

    jQuery手风琴效果是一种常见的网页交互设计,它利用JavaScript库jQuery实现了一种可折叠和展开的面板效果,常用于导航菜单、信息展示等场景。在网页中,这种效果可以让用户在一个有限的空间内查看和访问大量内容,...

    jquery水平手风琴折叠菜单插件

    【jQuery水平手风琴折叠菜单插件】是一种利用jQuery库实现的交互式菜单设计,它在网页中提供了独特的用户体验。这种菜单设计以1870年的主题为灵感,结合了现代技术,使得用户在浏览菜单时能感受到历史与科技的完美...

    JQuery横向手风琴效果1

    "JQuery横向手风琴效果1"就是一个利用jQuery实现的创新性组件,它为用户提供了一种高效的方式来展示内容,尤其是在有限的空间内展示大量信息时。手风琴效果通常用于折叠和展开内容区域,使得用户可以逐个查看或者...

    jQuery横向手风琴效果.zip

    "jQuery横向手风琴效果" 是一种常见的交互式设计元素,它采用JavaScript库jQuery实现,为用户提供了一种优雅的方式来展示内容,尤其是在有限的空间内展示大量信息时。在这个特定的代码包中,我们看到它是基于`...

    jQuery竖排动画手风琴折叠菜单栏代码.zip

    《jQuery竖排动画手风琴折叠菜单栏代码详解》 在网页设计中,交互性和用户体验是至关重要的元素,其中一种常见的交互元素就是手风琴菜单。手风琴菜单以其独特的折叠效果,使得大量信息得以在有限的空间内有序展示,...

    jQuery动画手风琴折叠菜单栏代码.zip

    在本文中,我们将深入探讨如何使用jQuery实现一个粉红色风格的手风琴折叠菜单栏,以及相关的JavaScript特效。手风琴菜单是一种常见的用户界面元素,它允许用户在一个有限的空间内展示和隐藏大量的分类内容,通常通过...

    jQuery+Bootstrap手风琴折叠菜单代码

    本项目是关于创建一个"jQuery+Bootstrap手风琴折叠菜单代码"的实现,这种菜单通常被称为"手风琴菜单",因为它在展开和折叠时具有类似手风琴的动态效果。 首先,jQuery是一个轻量级的JavaScript库,它提供了丰富的...

    jquery手风琴折叠式导航菜单特效!

    "jQuery手风琴折叠式导航菜单特效"是一种高效的交互设计,尤其适用于有限的屏幕空间,如侧边栏导航。本文将深入探讨这个特效的工作原理、实现方法以及它的优势。 首先,我们来了解jQuery。jQuery是一个轻量级的...

    jQuery垂直可折叠手风琴菜单.zip

    "jQuery垂直可折叠手风琴菜单"是一个利用jQuery实现的功能,它常用于网站的侧边栏菜单,提供一种优雅的方式来组织和展示大量层级结构的信息。 手风琴菜单(Accordion Menu)的设计理念源自于乐器手风琴,其特点是...

    jquery实现手风琴图片展示效果

    5. **响应式设计**:考虑到移动设备的使用,可以使用媒体查询进行响应式布局,确保手风琴效果在不同屏幕尺寸下都能良好运行。 总的来说,这个项目提供了学习和实践jQuery交互效果的良好机会,同时也展示了如何将...

    jquery手风琴式的展示动画

    这个“jquery手风琴式的展示动画”是一个利用jQuery库实现的手风琴效果,适用于首页新闻动态的展示,能够吸引用户的注意力并使信息呈现更有层次感。 jQuery库是JavaScript的一个轻量级框架,它简化了DOM操作、事件...

    jQuery飘带式垂直手风琴下拉菜单

    下面我们一起来看看如何实现这款漂亮的jQuery飘带式手风琴下拉菜单。 HTML代码 由于使用了bootstrap框架,因此其HTML结构也需要一致,代码如下: [......] 阅读全文>>

    jquery手风琴折叠导航菜单特效

    "jQuery手风琴折叠导航菜单特效"是一种常见的交互设计手法,它优化了用户体验,尤其是在有限的空间内展示大量分类时。本知识点将深入探讨这种特效的实现原理及应用。 首先,jQuery是一种轻量级的JavaScript库,它...

    jquery弹性手风琴(导航菜单)效果

    在编程领域,手风琴效果通常指的是一个可折叠和展开的面板结构,用户每次点击一个标题,相应的面板内容会展开或收起,其他面板则自动关闭。这种效果在导航菜单、信息展示等场景中应用广泛,因其交互性与视觉吸引力而...

    jQuery和css3垂直手风琴折叠菜单插件

    本篇文章将深入探讨如何使用jQuery和CSS3技术创建一款效果酷炫的垂直手风琴折叠菜单插件。 首先,jQuery是一个轻量级的JavaScript库,它简化了JavaScript的DOM操作,事件处理,动画设计以及Ajax交互。在手风琴菜单...

    jQuery垂直手风琴列表展示代码.zip

    Bootstrap框架则为手风琴效果提供了美观的样式和响应式布局。Bootstrap的手风琴组件(Accordion)利用CSS类和JavaScript插件,可以快速创建出适应各种屏幕尺寸的手风琴效果。在HTML结构上,每个手风琴项通常包含一个...

Global site tag (gtag.js) - Google Analytics