recherche

Maison >interface Web >js tutoriel >jQuery implémente un menu d'effet d'expansion FAQ fermé par default_jquery

jQuery implémente un menu d'effet d'expansion FAQ fermé par default_jquery

WBOY
WBOYoriginal
2016-05-16 15:39:291202parcourir

L'exemple de cet article décrit comment jQuery implémente le menu d'extension FAQ qui est fermé par défaut. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un menu d'extension de FAQ qui est fermé par défaut et introduit principalement l'utilisation de jQuery.

La valeur booléenne is(String expr) utilise une expression pour vérifier l'ensemble d'éléments actuellement sélectionné et renvoie vrai si au moins un élément correspond à l'expression donnée. Answer.is(':visible') fait référence à l'élément de réponse visible. S'il est visible, appelez Answer.slideUp(); else est un élément invisible. Appelezanswer.slideDown(); Des méthodes d'écriture similaires incluentanswer.is(':first')answer.is(':last'), qui est similaire à la pseudo-classe CSS a:hover

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

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

La capture d'écran de l'effet en cours d'exécution est la suivante : 

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

J'espère que cet article sera utile à la programmation jQuery de chacun.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée de 4 types de méthodes d'identification de type dans les compétences JavaScript_javascriptArticle suivant：Explication détaillée de 4 types de méthodes d'identification de type dans les compétences JavaScript_javascript

Articles Liés

Voir plus