jQuery扁平手风琴代码

最新推荐文章于 2024-11-11 19:29:13 发布
最新推荐文章于 2024-11-11 19:29:13 发布
阅读量78 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/lvzhihui/p/4650202.html
版权

演示网址：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。

 

转载于:https://www.cnblogs.com/lvzhihui/p/4650202.html

aishi8347
关注
jquery手风琴动画
m0_74913905的博客
04-18 92
今天来分享一个使用jQuery制作的手风琴效果。只需要几行代码就能实现。
jQuery 实现手风琴效果
m0_65627447的博客
11-28 1644
jQuery 实现手风琴效果
jquery扁平风格手风琴式菜单效果
ICode联盟
12-08 71
下载地址 $("dd").filter(":nth-child(n)").addClass("hidden"); $("dl").on("click", "dt", function() { $(this) .next() .slideDown(300) .siblings("dd") .slideUp(300); }); dd:
手风琴效果案例（jQuery）
qq_64182180的博客
11-20 3847
本案例会使用jQuery动画来实现一个简单的手风琴效果。
html翻页手风琴特效,jquery扁平风格的手风琴特效
weixin_32736961的博客
06-04 117
这是一款扁平风格的jquery手风琴特效。该手风琴特效使用扁平风格元素，包括颜色和图片。它使用简单，兼容IE8浏览器，非常实用。使用方法在页面中引入jquery和base.css文件。HTML结构该手风琴特效的HTML结构如下：语音外呼查看接口文档>>............JavaScript在页面DOM元素加载完毕之后，通过下面的方法来初始化该手风琴特效。$(function(){...
jQuery扁平化风格手风琴菜单
hellogril前端库
11-23 192
在线演示 本地下载
扁平式菜单jquery手风琴js特效
ICode联盟
03-02 97
扁平式菜单jquery手风琴特效，基于jquery.SuperSlide.2.1.1.js插件制作的点击展开收缩切换菜单代码。
云之讯jQuery扁平手风琴代码
04-02
【jQuery扁平手风琴代码】是一种常见的网页交互效果，常用于内容展示和导航菜单，尤其在现代网页设计中颇受欢迎。它以简洁、扁平化的界面风格和优雅的滑动切换效果，使得用户能够方便地展开和关闭内容区域，从而优化...
云之讯jQuery扁平手风琴代码.zip
07-11
《云之讯jQuery扁平手风琴代码》是一款专为网页设计者打造的JavaScript特效，它利用了流行的jQuery库，实现了简洁、扁平化的手风琴效果。在网页设计中，手风琴特效通常用于组织大量信息，通过展开和折叠的方式，使...
jQuery扁平横向手风琴代码.rar
05-23
【jQuery扁平横向手风琴代码】是一种使用JavaScript库jQuery实现的交互式网页元素，它在HTML页面上创建了一个扁平化设计的横向导航菜单。这个菜单采用了手风琴效果，意味着用户点击一个菜单项时，与其关联的内容会...
Echarts 折线图
weixin_44443380的博客
11-08 256
解决方法：设置emphasis.lineStyle和折线图本身lineStyle相同即可。问题：鼠标悬停在折线图上，折线变粗。3、去掉 hover 折线变粗方法。
每天10个vue面试题(九)
不熬夜的臭宝的博客
11-08 607
一天10个vue面试题喽！
上门理发系统的搭建
app830的博客
11-07 397
上门理发系统的搭建涉及多个方面，包括技术架构、功能模块、用户体验以及运营策略等。服务器：部署应用到云服务器（如AWS、阿里云）或本地服务器上，确保系统的稳定性和可扩展性。消息通知：通过短信、邮件或APP推送等方式，向用户发送预约确认、提醒等消息。订单管理：用户可以查看自己的预约订单，包括待付款、已付款、已完成等状态。服务浏览与选择：展示各类理发服务，包括价格、时长、适用人群等信息。在搭建过程中，要确保系统的安全性和稳定性，防止数据泄露和系统崩溃。操作便捷：优化用户操作流程，减少不必要的步骤，提高用户体验。
React Native 全栈开发实战班 - 导航栈定制
最新发布
做一个道者
11-11 246
React Navigation 允许开发者通过或options属性自定义导航栏的样式和行为。// App.jsreturn (},},
第三十七章 Vue之编程式导航及跳转传参
Calvin的博客
11-10 1362
前面的章节我们学习了声明式导航的路由跳转，简单理解就是通过链接形式的路由跳转，本章节我们来学习下编程式导航跳转，即点击按钮来实现页面的跳转。在Vue中提供了两种实现方式。Home.vue的代码在前者基础上稍做调整即可，获取方式等代码一样。编程式导航两种跳转方式对于两种传参方式也都支持。跳转方法中通过name属性指定路由即可。2.1.1. 查询参数传参（简写）2.2. name命名路由跳转传参。1.2. name 命名路由跳转。2.1. path路径跳转传参。2.2.1. 查询参数传参。
时间管理应用（可复制源码）
无限大的博客
11-08 399
创建一个简单的时间管理应用程序，结合 Pomodoro 技术使用 HTML、CSS 和 JavaScript。
【TS】九天学会TS语法——4.TypeScript 接口深入解析
m0_59873661的博客
11-07 1000
今天学习 TypeScript 的接口，以及了解如何定义对象的形状等内容。
241107-离线环境下RHEL通过Python配置BerkeleyDB数据库
专注机器学习之路
11-07 710
安装 Python 绑定前，系统需要已经安装了 BerkeleyDB C 库，并且头文件可供访问。如果你已经按照之前的步骤安装了 BerkeleyDB 5.3.28，请确保环境变量正确配置，以便编译时能够找到库和头文件。按照这些步骤，你应该能够成功地在指定路径下完成BerkeleyDB 5.3.28的离线安装。通过这些步骤，你应该可以验证 BerkeleyDB 5.3.28 是否已正确安装和配置。如果您还需要安装npm的离线包，您可以提前在联网的机器上用。安装完成后，启动 Python 解释器并验证。
jQuery手风琴效果代码：游戏网站切换新体验
资源摘要信息:"jQuery游戏网站手风琴切换代码" 知识点概述： jQuery游戏网站手风琴切换代码是一个JavaScript库，主要用于实现网页上的动态交互效果，特别适用于游戏网站的手风琴切换特效。手风琴切换效果能够通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值