当前位置:JS特效 » 手风琴 » jquery扁平风格的手风琴特效
 jquery扁平风格的手风琴特效
如果您觉得内容不错,请分享:

插件介绍

这是一款扁平风格的jquery手风琴特效。该手风琴特效使用扁平风格元素,包括颜色和图片。它使用简单,兼容IE8浏览器,非常实用。

浏览器兼容性

浏览器兼容性
时间:2021-07-24 阅读:86
简要教程

这是一款扁平风格的jquery手风琴特效。该手风琴特效使用扁平风格元素,包括颜色和图片。它使用简单,兼容IE8浏览器,非常实用。

使用方法

在页面中引入jquery和base.css文件。



                
HTML结构

该手风琴特效的HTML结构如下:

JavaScript

在页面DOM元素加载完毕之后,通过下面的方法来初始化该手风琴特效。

$(function(){
  $(".voice_2 ul li").each(function(){
    var fold = $(this).find(".fold");
    var unfold = $(this).find(".unfold");
    if(fold.is(":hidden")){
      $(this).width(680);
    }else{
      $(this).width(100);
    }
  })
  $(".voice_2 ul li").click(function(){
    var li_index = $(this).index();
    $(this).animate({width:680},200);
    $(this).find(".unfold").show();
    $(this).find(".fold").hide();
    $(this).siblings().animate({width:100},200);
    $(this).siblings().find(".unfold").hide();
    $(this).siblings().find(".fold").show();
  })
})
                
Top