演示网址：http://www.jq22.com/yanshi3583
HTML 代码 部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>云之讯jQuery扁平手风琴代码 - 站长素材</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel=‘stylesheet‘ type=‘text/css‘ href=‘css/base.css‘/>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/base.js"></script>
</head>
<body>
<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>
</body>
</html>
JS部分
<script>
$(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();
})
})
</script>
注释：
is() 方法：
is() 根据 选择器、元素 或 jQuery 对象 来检测匹配元素集合，如果这些元素中至少有一个元素匹配给定的参数，则返回 true。
语法
.is(selector)
| 参数 | 描述 |
|---|---|
| selector | 字符串值，包含匹配元素的选择器表达式。 |
详细说明
与其他筛选方法不同，.is() 不创建新的 jQuery 对象。相反，它允许我们在不修改 jQuery 对象内容的情况下对其进行检测。这在 callback 内部通常比较有用，比如事件处理程序。
请您注意，对于带有位置性选择器的选择器表达式字符串，比如 :first、:gt() 或者 :even，位置性筛选是针对传递到 .is() 的 jQuery 对象进行的，而非针对包含文档。所以对于上面的 HTML 来说，诸如 $("li:first").is("li:last") 的表达式返回 true，但是 $("li:first-child").is("li:last-child") 返回 false。