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();
 })
时间: 2024-10-27 17:21:44

jQuery效果 - 简单的手风琴效果的相关文章

jquery实现简单的手风琴效果

最近看到我看的教学视频有不少手风琴效果,我也试着写一下,当做练习. 明天我放假,就要去找工作,不知道,我的前端之路,能不能正式开始. 菜鸟起飞的机会都没有,那就尴尬了. 纯属练习: 效果如图: html: <ul class="wrap"> <li class="checked"> <span>选项1</span> <div>1</div> </li> <li> <

jquery 实现简单的手风琴效果

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="./js/jquery.min.js"></script> <style> body,html,ul,li,h3{ margin: 0; padding: 0

分享一款jquery+css3实现的手风琴效果代码【js插件】

代码适用于大部分浏览器 演示Demo地址:请猛戳 效果图片 程序吧下载地址 分享一款jquery+css3实现的手风琴效果代码[js插件],布布扣,bubuko.com

javascript+css3简单的手风琴效果

<!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>javascript+css3简单的手风琴效果</title> <style>#imageMenu{width:500px;height:200px;overflow:hidden;}#imageMenu ul *{transition:all linear 0.2s;

jQuery实现简单进度条效果

一个用jQuery实现的简单进度条,当加载页面时,屏幕顶部出现一条极细的小线条,加载页面时会显示加载进度. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jquery实现的简单进度条效果</title> 6 <style> 7 #web_loading{ 8 z-inde

使用jquery实现简单的拖动效果,分享源码

因为想实现相框的拖到,找了半天的原因愣是没有找到错误,所以,只能翻看源码了 如何实现拖动效果? 浏览DEMO 首先分析下拖动效果原理: 1.当鼠标在被拖动对象上按下鼠标(触发onmousedown事件,且鼠标在对象上方) 2.开始移动鼠标(触发onmousemove事件) 3.移动时更显对象的top和left值 4.鼠标放开停止拖动(触发onmouseup事件) 注意:拖动的对象必须是定位对象(即设置了position:absolute或 relative). 也就是说拖动事件=onmoused

jquery 超简单的点赞效果

1.HTML(可以优化一下,尽量少些几个标签.....) <div id="dianz"> <b class="cz"><em>1</em><i></i><s></s><u>超赞</u></b> <b class="tj"><em>2</em><i></i>

jquery 实现简单tab选项卡效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf8" /> <tit

炫酷的手风琴效果

你一定用过书签,也一定给你的书本加过书签,那么你见过书签式的导航吗? 你一定见过手风琴,也一定知道弹奏手风琴时的它的外形变化,那么你见过手风琴式的导航吗? 如果没有,请往下看: 前面的话: 这篇博文先通过Javascript做一个简单的手风琴效果,让大家对手风琴效果有一定的了解:紧接着,我们换jquery做类似的手风琴效果.前面的两个例子都很简单,接下来要放大招了,我想用JQ或是原生的JS去做类似淘宝网中用到的手风琴效果.继续回到书签问题,既然JQ和JS都能实现那么炫酷的效果,我们用CSS3能不