本文介绍了一个使用jQuery实现的常见问题解答(FAQ)折叠效果。通过简单的HTML结构配合jQuery的slideUp和slideDown方法，实现了点击标题展示或隐藏详细答案的功能。本文档提供了一段完整的示例代码，包括基本的HTML结构、必要的jQuery库引入及相应的JavaScript代码。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<script type="text/javascript" src="jquery-1.9.1.min.js">
<style>
$(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">
<dt>展开</dt>
<dd>我爱龙</dd>
<dt>展开</dt>
<dd>我爱茹</dd>
<dt>展开</dt>
<dd>我爱你</dd>
</dl>
</body>
</html>
扫一扫
4669
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
