手风琴
jquery扁平风格的手风琴特效
PetitQ
这是一款扁平风格的 jquery 手风琴特效。该手风琴特效使用扁平风格元素，包括颜色和图片。它使用简单，兼容 IE8 浏览器，非常实用。
使用方法：
在页面中引入 jquery 和 base.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();
})
})
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
