jQuery实现默认是闭合的FAQ展开效果菜单


Posted in Javascript onSeptember 14, 2015

本文实例讲述了jQuery实现默认是闭合的FAQ展开效果菜单。分享给大家供大家参考。具体如下:

这是一个默认是闭合的FAQ展形菜单,主要介绍jQuery的用法。

Boolean布尔值is( String expr )用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。answer.is(':visible')是指可见的answer元素。如果可见就调用answer.slideUp();使之隐藏。else则是不可见的元素 调用answer.slideDown();使之显示。类似的写法还有answer.is(':first')answer.is(':last')之类的,类似于CSS的伪类a:hover

运行效果截图如下:

jQuery实现默认是闭合的FAQ展开效果菜单

在线演示地址如下:

运行效果截图如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery的一些用法</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('#faq').find('dd').hide();
 //.隐藏显示的元素。
 $('#faq').find('dt').click(function() {
  var answer = $(this).next(); //当前节点的下一个节点
  // alert(answer.is(':visible')); 返回true / false
  if (answer.is(':visible')) {
//Boolean布尔值is( String expr )用一个表达式来检查当前选择的元素集合,
// 如果其中至少有一个元素符合这个给定的表达式就返回true。
//answer.is(':visible')是指可见的answer元素.
//如果可见就调用answer.slideUp();使之隐藏.
//else则是不可见的元素 调用answer.slideDown();使之显示.
//类似的写法还有answer.is(':first')answer.is(':last')之类的,类似于CSS的伪类a:hover
  answer.slideUp();
  } else {
  answer.slideDown();
  }
 });
});
</script>
<style>
body{font-size:10.5pt;}
dt{background:#00ffcc;}
</style>
</head>
<body>
 <dl id="faq">
 <dl id="faq">
  <dt>三水点靠木简介</dt>
  <dd>三水点靠木是国内专业的网站建设资源、脚本编程学习类网站</dd>
  <dt>你知道AJAX吗?</dt>
  <dd>它是目前很流行的交互式WEB前端应用。</dd>
  <dt>今晚,月亮很圆</dt>
  <dd>老婆,抬头望明月,低头想老婆!</dd>
 </dl>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
firebug的一个有趣现象介绍
Nov 30 Javascript
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 Javascript
js获取当前页面的url网址信息
Jun 12 Javascript
理解javascript中的回调函数(callback)
Sep 02 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
Jun 04 Javascript
解析浏览器端的AJAX缓存机制
Jun 21 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
node.js操作mysql简单实例
May 25 Javascript
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
微信小程序自定义单项选择器样式
Jul 25 Javascript
新手入门js闭包学习过程解析
Oct 08 Javascript
浅谈javascript如何获取文件后缀名
Aug 07 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 #Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 #Javascript
JS+DIV+CSS实现的经典标签切换效果代码
Sep 14 #Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
Sep 14 #Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 #Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
Sep 14 #Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 #Javascript
You might like
分享PHP入门的学习方法
2007/01/02 PHP
php设计模式 Observer(观察者模式)
2011/06/26 PHP
PHP缓存技术的使用说明
2011/08/06 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
ppk谈JavaScript style属性
2008/10/10 Javascript
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
javascript实现按回车键切换焦点
2015/02/09 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
JS动态增删表格行的方法
2016/03/03 Javascript
jQuery实现的表格展开伸缩效果实例
2016/09/07 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
2017/12/01 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
jQuery实现ajax的嵌套请求案例分析
2019/02/16 jQuery
9个JavaScript日常开发小技巧
2020/10/06 Javascript
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
微信跳一跳辅助python代码实现
2018/01/05 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
python单例模式实例解析
2018/08/28 Python
详解python中@的用法
2019/03/27 Python
Python编写通讯录通过数据库存储实现模糊查询功能
2019/07/18 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
Marriott中国:万豪国际酒店查询预订
2016/09/02 全球购物
澳大利亚宠物商店:Petbarn
2017/11/18 全球购物
应届护士推荐信
2013/11/16 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
单位在职证明书
2014/09/11 职场文书
现实表现材料范文
2014/12/23 职场文书
教师节主题班会教案
2015/08/17 职场文书
Python爬取奶茶店数据分析哪家最好喝以及性价比
2022/09/23 Python