jQuery实现默认是闭合的FAQ展开效果菜单
本文实例讲述了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
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-close-show-faq-menu-codes/
运行效果截图如下：
<!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程序设计有所帮助。
相关推荐
-
jQuery制作效果超棒的手风琴折叠菜单
拉风的jQuery制作的手风琴折叠菜单,效果非常不错!这里是之前版本的改进版,主要是jquery代码改进 演示图: main.js $(function(){ var tmp = null, $title = $('.title'), $con = $('.title > ul'); $title.click(function(){ $(tmp).children('ul').slideUp().end().children('.arrow').removeClass('arrow-up');
-
jquery实现可点击伸缩与展开的菜单效果代码
本文实例讲述了jquery实现可点击伸缩与展开的菜单效果代码.分享给大家供大家参考.具体如下: 这是一款jquery实现的点击伸缩与展开的菜单代码,操作方式大家都知道吧,点击一下展开二级菜单的内容,再次点击则合拢,很经典的折叠菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-click-show-hidden-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/
-
jquery实现可横向和竖向展开的动态下滑菜单效果
本文实例讲述了jquery实现可横向和竖向展开的动态下滑菜单效果.分享给大家供大家参考.具体如下: 这里演示了两个下拉导航菜单的效果,用jquery.easing.1.3.js和jquery.naviDropDown.1.0.js以及jquery.hoverIntent.minified.js共同实现,最新的jquery版本也可以引入,在演示页面中,分别有横向水平向下滑出的下拉菜单,还有纵向垂直布局向右滑出的导航菜单,根据你的需要选择使用. 运行效果截图如下: 在线演示地址如下: http://
-
jQuery实现可展开合拢的手风琴面板菜单
本文实例讲述了jQuery实现可展开合拢的手风琴面板菜单.分享给大家供大家参考.具体如下: 这是一款大家都常见的折叠菜单,手风琴折叠面板,会展开和合拢,带点Flash动画效果,修改时请注意: slideUp : 通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数.这个动画效果只调整元素的高度,可以使匹配的元素以"滑动"的方式隐藏起来. slideDown: 通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数.这个动
-
基于JQuery的简单实现折叠菜单代码
菜单为二级,初始化时为折叠效果,单击大项标题时展开,显示二级列表. HTML代码如下: 复制代码 代码如下: <body> <div class="mainleftFAQ"> <div class="category"> <img src="images/admin.gif" width="215" height="66" /> </div> &l
-
jquery+CSS实现的多级竖向展开树形TRee菜单效果
本文实例讲述了jquery+CSS实现的多级竖向展开树形TRee菜单效果.分享给大家供大家参考.具体如下: 这里演示垂直的树形菜单,应用CSS和jquery技术来实现,显示在网页左侧比较合适,考虑到简洁,没有使用图片之类的作修饰.本效果兼容IE.火狐等主流浏览器. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-css-nlevel-vshow-tree-codes/ 具体代码如下: <!DOCTYPE html> <hea
-
jQuery实现的简单折叠菜单(折叠面板)效果代码
本文实例讲述了jQuery实现的简单折叠菜单(折叠面板)效果代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的折叠菜单,可展开一些内容,实际上称它为一个面板比较好,是一个折叠面板,使用了jQuery1.6.2插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-toggle-zd-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD X
-
jQuery实现折叠、展开的菜单组效果代码
本文实例讲述了jQuery实现折叠.展开的菜单组效果代码.分享给大家供大家参考.具体如下: 这是一款jQuery实现的漂亮的竖向折叠菜单组,初次运行的时候请刷新一下页面,让jQ载入,这款菜单应用广泛,可用到后台左侧,网站前台也可以用,发现自腾讯微博开放平台,分享给大家一起研究吧.提示:如果有错误,请刷新页面. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fade-in-out-menu-group-codes/ 具体代码如下:
-
jquery实现红色竖向多级向右展开的导航菜单效果
本文实例讲述了jquery实现红色竖向多级向右展开的导航菜单效果.分享给大家供大家参考.具体如下: 这里介绍的是一款红色竖向多级向右展开的导航菜单,多用于博客网站的导航菜单,红色风格,非常漂亮,向右伸展的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-red-style-show-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans
-
jQuery实现默认是闭合的FAQ展开效果菜单
本文实例讲述了jQuery实现默认是闭合的FAQ展开效果菜单.分享给大家供大家参考.具体如下: 这是一个默认是闭合的FAQ展形菜单,主要介绍jQuery的用法. Boolean布尔值is( String expr )用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true.answer.is(':visible')是指可见的answer元素.如果可见就调用answer.slideUp();使之隐藏.else则是不可见的元素 调用answer.slideDow
-
jQuery 淡入淡出、展开收缩菜单实现代码
效果图:运行以后,刷新下即可. jQuery淡入淡出.展开收缩菜单 ul li{list-style:none;} ul li.menu{position:relative;width:120px;} ul li.menu ul{display:none;text-align:center;background:#fff;border:1px solid #ddd;width:100px;padding:5px;} ul li.menu ul li{padding:5px 0;border-bo
-
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
本文实例讲述了jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码.分享给大家供大家参考.具体如下: 这是一款仿百度首页jQuery滑动伸缩展开的添加服务效果,其实是一款伸缩菜单,只不过这个菜单有点特别,只从一头向另一头伸展出去,菜单的伸缩效果平滑,设计精美. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-baidu-index-show-serv-style-codes/ 具体代码如下: <!DOCTYPE html PUBLI
-
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
本文实例讲述了jQuery实现DIV响应鼠标滑过由下向上展开效果.分享给大家供大家参考,具体如下: 鼠标浮动时div由下向上缓慢展开效果 1. 演示效果(鼠标浮动时div由下向上展开,浮动后div由上向下折叠恢复原样) 2. 代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net jQuery响应鼠标实现div由下向上展开</
-
jquery实现手风琴展开效果
本文实例为大家分享了jquery实现手风琴展开效果的具体代码,供大家参考,具体内容如下 手风琴模式实现方式: dom层代码: <div class="accordionWrap"> <div class="wrap"> <div class="title"> <span>内容一</span> <span
-
简单实现js点击展开二级菜单功能
虽然,jQuery已经非常好用了,但是实际的开发项目中,还是有很多限制,比如项目组奇葩的要求,不能使用任何插件,当然,也是考虑插件占用资源,毕竟100+KB对与小型项目来说还是非常大的.我最近就遇到做个点击展开二级菜单的要求,当然只能用原生的JS去写来实现,我借鉴了网上的一个案例,补充一下,分享一下: 如果,默认打开页面进来时二级菜单是隐藏的,需要点击才能展现二级菜单,再点击就是隐藏二级菜单.这里有两个点,实现展现和隐藏用display="block"和display="no
-
jQuery实现新闻播报滚动及淡入淡出效果示例
本文实例讲述了jQuery实现新闻播报滚动及淡入淡出效果.分享给大家供大家参考,具体如下: 下面是上下滚动源码 <!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&q
-
Android TextView多文本折叠展开效果
最近做项目,效果图要用到TextView的折叠,超过一定行数的时候,就会折叠起来,点击可以展开.网上找了一些效果,自己也稍作了修改.便拿来与网友分享分享. 参考文献:Android UI实现多行文本折叠展开效果 第一种:通过多个布局组合实现 大概步骤: - 定义布局,垂直的线性LinearLayout布局.TextView和ImageView. 在layout中定义基本组件. - 设置TextView的高度为指定行数*行高. 不使用maxLine的原因是maxLine会控制显示文本的行数,不方便