cari

Rumah  >  Artikel  >  hujung hadapan web  >  jQuery melaksanakan menu kesan pengembangan FAQ tertutup secara default_jquery

jQuery melaksanakan menu kesan pengembangan FAQ tertutup secara default_jquery

WBOY
WBOYasal
2016-05-16 15:39:291195semak imbas

Contoh dalam artikel ini menerangkan cara jQuery melaksanakan menu pengembangan Soalan Lazim yang ditutup secara lalai. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah menu pengembangan Soalan Lazim yang ditutup secara lalai dan terutamanya memperkenalkan penggunaan jQuery.

Nilai Boolean ialah(String expr) menggunakan ungkapan untuk menyemak set elemen yang dipilih pada masa ini dan mengembalikan benar jika sekurang-kurangnya satu elemen sepadan dengan ungkapan yang diberikan. answer.is(':visible') merujuk kepada elemen jawapan yang boleh dilihat. Jika ia kelihatan, hubungi answer.slideUp(); else ialah elemen yang tidak kelihatan. Panggil answer.slideDown(); Kaedah penulisan yang serupa termasuk answer.is(':first')answer.is(':last'), yang serupa dengan CSS pseudo-class a:hover

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

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

Tangkapan skrin kesan berjalan adalah seperti berikut: 

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

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Penjelasan terperinci tentang 4 jenis kaedah pengenalan jenis dalam kemahiran JavaScript_javascriptArtikel seterusnya：Penjelasan terperinci tentang 4 jenis kaedah pengenalan jenis dalam kemahiran JavaScript_javascript

Artikel berkaitan

Lihat lagi