JQuery 点击实现展开折叠菜单
<%@ 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>