[代码收集]jQuery默认收缩的点击进行展开/折叠的FAQ菜单 - 笑忘书网页代码收藏馆 - 35230.WODEMO.COM

首页-代码 2013-10-25 20:00:18 -0400

★jQuery默认收缩的点击进行展开/折叠的FAQ菜单★

请勿抄袭本页面

代码说明

前面发了JQuery默认展开的点击进行展开/折叠的FAQ菜单，再发一个默认是闭合的FAQ展形菜单，效果很不错。转自烈火网，@笑忘书修改代码样式

html代码

<script type="text/javascript" src="http://www.veryhuo.com/uploads/common/js/jquery-1.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>
#faq dt{
background:#00641b;border-top:1px solid #fff;border-bottom:1px solid #ccc;margin:3px 5px;color:yellow;padding:2px;
}
#faq dd{
background:#F5F5F5;margin:2px 5px;border-radius:5px;border:2px solid #111;padding:3px 4px;
}
</style>
<dl id="faq">
<dt>我的文件会被删除或会过期吗?</dt>
<dd>不会。您的文件永远不会被我们或者任何第三方删除，也不会过期。但是请注意，如果您的文件含有违法信息，那么我们会把它设置为非公开文件，并可能禁止您的账户再进行上传。</dd>
<dt>为何下载链接没法下载了?</dt>
<dd>请确保你的链接是最新的，因为"下载"二字后面的链接地址是定期更新的，只有在文件页面的下载链接才是最新的。</dd>
<dt>wodemo.com 是何时上线的?</dt>
<dd>2010年3月16日</dd>
<dt>什么是文件页面?</dt>
<dd>就是显示文件名，文件介绍，文件上传时间，下载地址等信息的页面。</dd>
<dt>文件总量有限制吗?</dt>
<dd>没有。无论是文件数量，还是文件存储容量，都是没有限制的。我们只限制单个文件的大小。</dd> 
</dl>

12914368.3.2.js (55.91 KiB) | Read | Meta | +

代码演示

我的文件会被删除或会过期吗?: 不会。您的文件永远不会被我们或者任何第三方删除，也不会过期。但是请注意，如果您的文件含有违法信息，那么我们会把它设置为非公开文件，并可能禁止您的账户再进行上传。
为何下载链接没法下载了?: 请确保你的链接是最新的，因为"下载"二字后面的链接地址是定期更新的，只有在文件页面的下载链接才是最新的。
wodemo.com 是何时上线的?: 2010年3月16日
什么是文件页面?: 就是显示文件名，文件介绍，文件上传时间，下载地址等信息的页面。
文件总量有限制吗?: 没有。无论是文件数量，还是文件存储容量，都是没有限制的。我们只限制单个文件的大小。

[代码仅供参考，转载请注明出处]

----Comments(2)----
【飛龍在天】 (@891622172) | @ at 2014-03-26 07:09:
代码演示？没反应啊！莫非我的UC不支持？

迷茫者的微笑 (@1044529113) | @ at 2014-01-15 04:53:
偷走了，制作课程表用^_^

Subscribe | Register | Login | N