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 replace方法去空格
May 08 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
jquery插件实现图片悬浮
Apr 16 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
239军机修复记
2021/03/02 无线电
PHP设置图片文件上传大小的具体实现方法
2013/10/11 PHP
php实现保存submit内容之后禁止刷新
2014/03/19 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
php 类自动载入的方法
2015/06/03 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
JS实现模仿微博发布效果实例代码
2013/12/16 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
浅谈JavaScript 框架分类
2014/11/10 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
vue实现商品列表的添加删除实例讲解
2020/05/14 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
Python中为什么要用self探讨
2015/04/14 Python
举例讲解Python中metaclass元类的创建与使用
2016/06/30 Python
Python函数式编程
2017/07/20 Python
基于python的多进程共享变量正确打开方式
2018/04/28 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
Python 寻找局部最高点的实现
2019/12/05 Python
Skyscanner澳大利亚:全球领先的旅游搜索网站
2018/03/24 全球购物
英国浴室洗脸盆购物网站:Click Basin
2018/06/08 全球购物
美国Randolph太阳镜官网:美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
销售高级职员求职信
2013/10/29 职场文书
模具专业自荐信
2014/05/29 职场文书
单位授权委托书范文
2014/08/02 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
教师先进个人材料
2014/12/17 职场文书
母亲去世追悼词
2015/06/23 职场文书