jQuery实现简单的手风琴效果


Posted in jQuery onApril 17, 2020

本文实例为大家分享了jQuery实现手风琴效果的具体代码,供大家参考,具体内容如下

实现手风琴效果如图所示:

jQuery实现简单的手风琴效果

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>
      <span class="txt">插件库</span>
     </div>
     <div class="unfold" style="display:block">
      <dl>
       <dt><img src="images/img10.png" /></dt>
       <dd>
       </dd>
       <dd>使用语音外呼的模式将指定的语音呼入至接听人,可通过这种方式为针对性的客户提供会议通知、活动通知,并可通过API接口程序化控制呼出时间、呼出效果反馈</dd>
      </dl>
     </div>
    </li>
    <li class="li2">
     <div class="fold">
      <span class="img"></span>
      <span class="txt">点击呼叫</span>
     </div>
     <div class="unfold">
      <dl>
       <dt><img src="images/img42.png" /></dt>
       <dd>
       </dd>
       <dd>通过APP应用内按钮或浏览器网页按钮点击并发起IP通话、运营商线路通话服务,减少用户交互,提升用户体验</dd>
      </dl>
     </div>
    </li>
    <li class="li3">
     <div class="fold">
      <span class="img"></span>
      <span class="txt">直拨通话</span>
     </div>
     <div class="unfold">
      <dl>
       <dt><img src="images/img49.png" /></dt>
       <dd>
       </dd>
       <dd>无论是智能终端、浏览器模式,通过APP或者网页发起通话,接通方为手机用户或固话用户,常见集成至与企业服务相关的移动应用、企业客服座席。</dd>
      </dl>
     </div>
    </li>
    <li class="li4">
     <div class="fold">
      <span class="img"></span>
      <span class="txt">回拨通话</span>
     </div>
     <div class="unfold">
      <dl>
       <dt><img src="images/img50.png" /></dt>
       <dd>
       </dd>
       <dd>同时通过平台方发起主叫和被叫双方,定制通话方满足不同需求的客户服务,企业服务易可根据具体业务需求为客户提供定制服务</dd>
      </dl>
     </div>
    </li>
    <li class="li5">
     <div class="fold">
      <span class="img"></span>
      <span class="txt">互联网通话</span>
     </div>
     <div class="unfold">
      <dl>
       <dt><img src="images/img51.png" /></dt>
       <dd>
       </dd>
       <dd>基于互联网纯网络通话,无运营商和地域限制,拥有更清晰的语音质量,支持语音三方密钥的加密传输</dd>
      </dl>
     </div>
    </li>
    <li class="li6">
     <div class="fold">
      <span class="img"></span>
      <span class="txt">语音会议</span>
     </div>
     <div class="unfold">
      <dl>
       <dt><img src="images/img52.png" /></dt>
       <dd>
       </dd>
       <dd>同时桥接多人基于IP、电话语音的会议服务,基于API控制会议时长、成员邀请、禁音、移除等功能。</dd>
      </dl>
     </div>
    </li>
   </ul>   
  </div>
 </div>
</div>

js代码:

$(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();
 })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
jQuery实现视频展示效果
May 30 jQuery
jquery实现简单拖拽效果
Jul 20 jQuery
jQuery自定义多选下拉框效果
Jun 19 #jQuery
jQuery实现下拉菜单的实例代码
Jun 19 #jQuery
jquery DataTable实现前后台动态分页
Jun 17 #jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 #jQuery
jQuery 控制文本框自动缩小字体填充
Jun 16 #jQuery
jQuery序列化后的表单值转换成Json
Jun 16 #jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 #jQuery
You might like
php 操作数组(合并,拆分,追加,查找,删除等)
2012/07/20 PHP
php基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
PHP根据key删除数组中指定的元素
2019/02/28 PHP
jquery $.each() 使用小探
2013/08/23 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
2014/04/04 Javascript
javascript实现的元素拖动函数宿主为浏览器
2014/07/21 Javascript
对比分析json及XML
2014/11/28 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
JS中offset和匀速动画详解
2018/02/06 Javascript
关于TypeScript模块导入的那些事
2018/06/12 Javascript
基于node.js实现爬虫的讲解
2019/02/18 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
python3.3实现乘法表示例
2014/02/07 Python
python获取从命令行输入数字的方法
2015/04/29 Python
Python中的index()方法使用教程
2015/05/18 Python
Python 函数返回值的示例代码
2019/03/11 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
保安员岗位职责
2013/11/17 职场文书
基层干部十八大感言
2014/01/19 职场文书
个人现实表现材料
2014/02/04 职场文书
《陋室铭》教学反思
2014/02/26 职场文书
行政部岗位职责范本
2014/03/13 职场文书
车贷收入证明范本
2014/09/14 职场文书
简易离婚协议书范本
2014/10/24 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
药房管理制度范本
2015/08/06 职场文书
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python