这是一款扁平风格的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(); }) })
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!