FAQ最简单的点击显示 - 源于生活

[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>