实现手风琴效果如图所示:
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();
- })
来源: http://www.jb51.net/article/116581.htm