jQuery實現(xiàn)簡單的手風琴效果
更新時間:2020年04月17日 16:18:40 作者:風雨后見彩虹
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)簡單的手風琴效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了jQuery實現(xiàn)手風琴效果的具體代碼,供大家參考,具體內(nèi)容如下
實現(xiàn)手風琴效果如圖所示:

html結(jié)構(gòu):
<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應用內(nèi)按鈕或瀏覽器網(wǎng)頁按鈕點擊并發(fā)起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或者網(wǎng)頁發(fā)起通話,接通方為手機用戶或固話用戶,常見集成至與企業(yè)服務相關的移動應用、企業(yè)客服座席。</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>同時通過平臺方發(fā)起主叫和被叫雙方,定制通話方滿足不同需求的客戶服務,企業(yè)服務易可根據(jù)具體業(yè)務需求為客戶提供定制服務</dd>
</dl>
</div>
</li>
<li class="li5">
<div class="fold">
<span class="img"></span>
<span class="txt">互聯(lián)網(wǎng)通話</span>
</div>
<div class="unfold">
<dl>
<dt><img src="images/img51.png" /></dt>
<dd>
</dd>
<dd>基于互聯(lián)網(wǎng)純網(wǎng)絡通話,無運營商和地域限制,擁有更清晰的語音質(zhì)量,支持語音三方密鑰的加密傳輸</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();
})
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
使用jquery實現(xiàn)select添加實現(xiàn)后臺權限添加的效果
使用jquery實現(xiàn)select添加實現(xiàn)后臺權限添加的效果,需要的朋友可以參考下。2011-05-05
jQuery實現(xiàn)參數(shù)自定義的文字跑馬燈效果
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)參數(shù)自定義的文字跑馬燈效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-08-08
jquery ajax提交表單數(shù)據(jù)的兩種實現(xiàn)方法
貌似AJAX越來越火了,作為一個WEB程序開發(fā)者要是不會這個感覺就要落伍,甚至有可能在求職的時候?qū)冶惶蕴?。我也是一個WEB程序開發(fā)者,當然我也要“隨波逐流”一把,不然飯碗不保??!2010-04-04

