search

Home >Web Front-end >JS Tutorial >jQuery implements a closed FAQ expansion effect menu by default_jquery

jQuery implements a closed FAQ expansion effect menu by default_jquery

WBOY
WBOYOriginal
2016-05-16 15:39:291200browse

The example in this article describes how jQuery implements the FAQ expansion menu that is closed by default. Share it with everyone for your reference. The details are as follows:

This is a FAQ expansion menu that is closed by default and mainly introduces the usage of jQuery.

Boolean value is(String expr) uses an expression to check the currently selected set of elements and returns true if at least one element matches the given expression. answer.is(':visible') refers to the visible answer element. If it is visible, call answer.slideUp(); to hide it. else is an invisible element. Call answer.slideDown(); to display it. Similar writing methods include answer.is(':first')answer.is(':last'), which is similar to the CSS pseudo-class a:hover

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/jquery-close-show-faq-menu-codes/

The screenshot of the running effect is as follows: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery的一些用法</title>
<script type="text/javascript" src="jquery1.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>
body{font-size:10.5pt;}
dt{background:#00ffcc;}
</style>
</head>
<body>
 <dl id="faq">
 <dl id="faq">
  <dt>脚本之家简介</dt>
  <dd>脚本之家是国内专业的网站建设资源、脚本编程学习类网站</dd>
  <dt>你知道AJAX吗？</dt>
  <dd>它是目前很流行的交互式WEB前端应用。</dd>
  <dt>今晚，月亮很圆</dt>
  <dd>老婆，抬头望明月，低头想老婆！</dd>
 </dl>
</body>
</html>

I hope this article will be helpful to everyone’s jQuery programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of 4 types of type identification methods in JavaScript_javascript skillsNext article：Detailed explanation of 4 types of type identification methods in JavaScript_javascript skills

Related articles

See more