FAQ最简单的点击显示

vingoo

自己引用jquery

[JavaScript] 纯文本查看 复制代码

<script type="text/javascript">
$(document).ready(function() {
 $('#faq').find('ul').hide();
 //.隐藏显示的元素。
 $('#faq').find('h2').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>

[CSS] 纯文本查看 复制代码

<style>
#faq h2 {
	font-size: 14px;
	font-weight: bold;
	line-height: 30px;
	border-bottom: 1px solid #000;
	margin-bottom: 10px;
}
#faq ul {
	margin: 0 10px 10px 10px;
	border-bottom: 1px #666 solid;
	border-left: 1px #666 solid;
	padding: 10px;
	background-color: #F2F2F2;
	color: #527283;
}
</style>

[HTML] 纯文本查看 复制代码

<div id="faq">
<h2></h2>
<ul></ul>
</div>