HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 资源下载 开发工具 查看内容

jquery扁平风格的手风琴特效

2016-12-29 09:46| 发布者: admin| 查看: 567| 评论: 0

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

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

 使用方法

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

[代码]css代码:

<link href="path/to/css/bootstrap.min.css" rel="stylesheet">
<script src="path/to/jquery.min.js" type="text/javascript"></script>
 HTML结构

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

<div class="item_box box10">
  <div class="item_box_wp">
    <div class="voice_2">
      <ul>
        <li class="li1" id="li1">
          <div class="fold" style="display:none;">
            <span class="img"></span>
          </div>
          <div class="unfold" style="display:block">
            <dl>
              <dt><img src="images/img10.png" /></dt>
              <dd>
                <b>语音外呼<a href="#">查看接口文档>></a></b>
              </dd>
              <dd>......</dd>
            </dl>
          </div>
        </li>
        ......
      </ul>         
    </div>
  </div>
</div>
 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();
  })
})


鲜花

握手

雷人

路过

鸡蛋

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-1-21 16:28

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部