Rumah > hujung hadapan web > tutorial js > jquery melaksanakan klik untuk mengembangkan senarai sambil menyembunyikan lists_jquery lain

jquery melaksanakan klik untuk mengembangkan senarai sambil menyembunyikan lists_jquery lain

WBOY
Lepaskan: 2016-05-16 15:46:03
asal
1380 orang telah melayarinya

Contoh dalam artikel ini menerangkan pelaksanaan jquery untuk mengklik untuk mengembangkan senarai sambil menyembunyikan senarai lain. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Jquery digunakan di sini untuk melaksanakan pengembangan dan kesan penyembunyian Selepas mengklik tajuk senarai, kandungan item mengembang, dan item lain mengecut, iaitu, ia tidak dipaparkan. Ini soal keutamaan peribadi Sesetengah orang suka tidak memaparkan kandungan pilihan lain secara lalai.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Kod khusus 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=utf-8" />
<title>js点击展开列表</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<script type="text/javascript">
// 收缩展开效果
$(document).ready(function(){
$('.box').click(function(){
$(this).children('.text').slideToggle().parents('.box').siblings('.box').children('.text').hide();
})  
});
</script>
<style type="text/css">
.box{width:200px; margin:0 auto; background:#CCC;}
.text{display:none;}
</style>
<body>
<div class="box">
  <h2>对ASP擅长的程序</h2>
  <div class="text">论坛类和文章类</div>
  </div>
</div>
<div class="box">
  <h2>对PHP擅长的程序</h2>
  <div class="text">博客类和新闻类</div>
  </div>
</div>
<div class="box">
  <h2>对前端擅长的插件</h2>
  <div class="text">jquery</div>
  </div>
</div>
</body>
</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan