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 相关文章推荐
利用jQuery和CSS将背景图片拉伸
Oct 16 Javascript
整理Javascript流程控制语句学习笔记
Nov 29 Javascript
基于canvas实现的绚丽圆圈效果完整实例
Jan 26 Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 Javascript
几种tab切换详解
Feb 03 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
Oct 20 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
Aug 30 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
浅谈JavaScript 代码整洁之道
Oct 23 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 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下用GD生成生成缩略图的两个选择和区别
2007/04/17 PHP
php for 循环语句使用方法详细说明
2010/05/09 PHP
小文件php+SQLite存储方案
2010/09/04 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
php修改文件上传限制方法汇总
2015/04/07 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
javascript实现将文件保存到本地方法汇总
2015/07/26 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
2019/08/02 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
python中readline判断文件读取结束的方法
2014/11/08 Python
理论讲解python多进程并发编程
2018/02/09 Python
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
python通过Windows下远程控制Linux系统
2018/06/20 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
python Cartopy的基础使用详解
2020/11/01 Python
html5 自定义播放器核心代码
2013/12/20 HTML / CSS
Marlies Dekkers内衣美国官方网上商店:高端内衣品牌
2018/11/12 全球购物
数据库专业英语
2012/11/30 面试题
一道SQL存储过程面试题
2016/10/07 面试题
党校培训自我鉴定范文
2014/03/20 职场文书
十佳好少年事迹材料
2014/08/21 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
情况说明书怎么写
2015/10/08 职场文书