jQuery melaksanakan melipat dan mengembangkan menu kesan kumpulan code

Rumah

hujung hadapan web

tutorial js

jQuery melaksanakan melipat dan mengembangkan menu kesan kumpulan code_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:39 PM

jquery Kembangkan lipat

Contoh dalam artikel ini menerangkan kod jQuery untuk melaksanakan lipatan dan mengembangkan kesan kumpulan menu. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah kumpulan menu lipatan menegak yang cantik yang dilaksanakan oleh jQuery Sila muat semula halaman semasa menjalankannya untuk kali pertama dan biarkan menu ini digunakan secara meluas dan boleh digunakan di sebelah kiri latar belakang dan bahagian hadapan meja tapak web Menemuinya di platform terbuka Tencent Weibo, kongsikannya dengan semua orang untuk belajar bersama. Petua: Jika terdapat ralat, sila muat semula halaman.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/jquery-fade-in-out-menu-group-codes/

Kod khusus adalah seperti berikut:

100

<!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>一个展开合拢的菜单效果</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<style>
* { margin:0; padding:0; }
ul,li { list-style:none; }
.catalog { width:164px; margin:0 auto;}
.t1 { height:4px; background:url(images/bg_catalog.gif) left top no-repeat; }
.t2 { background:url(images/bg_catalog.gif) -164px top repeat-y; }
.t3 { height:4px; background:url(images/bg_catalog.gif) left bottom no-repeat; }
.t2 h2 { height:81px; background:url(images/bg_catalog_logo.gif) center no-repeat; text-indent:-9999px; }
.t2 h3 { heigth:36px; line-height:36px; margin:0 1px; text-indent:26px; background:url(images/bg_catalog_icon.gif) no-repeat 13px 14px; font-size:14px; border-top:1px solid #fFF; }
.t2 ul { padding:10px 0; font-size:12px; }
.t2 li { text-indent:27px; height:30px; line-height:30px; }
.selected { display:block;}
.unselected {display:none;}
</style>
</head>
<body>
<div class="re_left">
<div class="catalog">
<div class="t1"></div> 
<div class="t2">
 <h2>资源</h2>
 <h3><a href="javascript:void(0);" src="#">平台使用说明</a></h3>
 <ul class="unselected">
 <li><a href="#">平台介绍</a></li>
 <li><a href="#">应用开发说明</a></li>
 <li><a href="#">应用审核流程</a></li>
 <li style="display:none;"><a href="#">成功案例</a></li>
 <li><a href="#">开发者协议</a></li>
 </ul>
 <h3><a href="javascript:void(0);" src="#">API说明</a></h3>
 <ul class="unselected">
 <li><a href="#">API文档</a></li>
 <li><a href="#">Oauth授权说明</a></li>
 <li><a href="#">API调用权限</a></li>
 </ul>
 <h3><a href="javascript:void(0);" src="#">SDK及资源下载</a></h3>
 <ul class="unselected">
 <li><a href="#">SDK下载</a></li>
 <li><a href="#">视觉素材下载</a></li>
 </ul>
 <h3><a href="javascript:void(0);" src="#">帮助中心</a></h3>
 <ul class="unselected">
 <li><a href="#">常见问题解答</a></li>
 <li><a href="#">返回错误码说明</a></li>
 </ul>
</div>
<div class="t3"></div>
</div>
</div>
<script type="text/javascript">
 $(document).ready(function(){
 var catalogIndex=[0,0];
 if (catalogIndex[0]==2){catalogIndex[0]=3;}
 else if(catalogIndex[0]==3){catalogIndex[0]=2;}
 if(catalogIndex.length==0){catalogIndex=[0,0];}
 $(".re_left .catalog h3 a").each(function(){
  $(this).attr("src",$(this).attr("href"));
  });
 $(".re_left .catalog").find("ul").css("border-bottom",0).end().find("h3:eq("+catalogIndex[0]+")").addClass("open").find("a").attr("href","javascript:void(0);").end().next().css("display","block").find("li:eq("+(catalogIndex[1]-1==-1&#63;9999:catalogIndex[1]-1)+")").addClass("active");$(".re_left .catalog").find("h3").last().css("border-bottom-width","0");});
$(".re_left .catalog").find("h3").bind("click",function(){
  if ($(this).hasClass("open"))
  {
  if ($(this).next().find(".active").size()==0)
  {
   $(this).next().slideUp(500,function(){
   $(this).prev().removeClass("open");
   }); 
  }
  else
  {
   $(this).next().slideUp(500,function(){
   $(this).prev().removeClass("open");
   //window.location.href=$(this).prev().find("a").attr("src");
   });
  }
  }
  else
  {
  $(this).parent().find("ul").slideUp("slow").end().find("h3").removeClass("open");
  $(this).addClass("open").next().slideDown(500,function(){
  if ($(this).nextAll("h3").size()>0)
  {$(this).parent().find("h3").last().css("border-bottom-width","1px");}
  else
  {$(this).parent().find("h3").last().css("border-bottom-width","0");}
  window.location.href=$(this).prev().find("a").attr("src");
  });
  }
  return false;
}); 
</script>
<br><div align="center">提示：如果有错误，请刷新页面。</div>
</body>
</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.

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

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

4 minggu yang lalu By DDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

3 minggu yang lalu By DDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

4 minggu yang lalu By DDD

<🎜>: Rails Dead - Cara Melengkapkan Setiap Cabaran

1 bulan yang lalu By DDD

Panduan Atomfall: Lokasi Item, Panduan Pencarian, dan Petua

1 bulan yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7700

Tutorial Java

1640

Tutorial CakePHP

1393

Tutorial Laravel

1287

Tutorial PHP

1230

Tunjukkan Lagi

Related knowledge

Sarung telefon Google Pixel 9 Pro Fold terdedah: Skrin luar 6.4 inci, skrin dalam 8.02 inci Jun 25, 2024 pm 02:35 PM

Menurut berita pada 25 Jun, sumber ytechb menerbitkan catatan blog semalam (24 Jun), berkongsi paparan sarung telefon bimbit Google Pixel 9 Pro Fold, sekali lagi menunjukkan reka bentuk bahagian belakang skrin lipat ini. Menurut berita sebelum ini, Google akan mengeluarkan siri telefon bimbit Pixel 9 pada Oktober tahun ini Selain tiga telefon dalam siri Pixel 9, Pixel Fold juga akan disertakan dalam siri Pixel 9, dan akan dinamakan Pixel 9. Pro Fold selepas ia dilancarkan secara rasmi. Sarung telefon yang terdedah kali ini datang daripada pengeluar aksesori Torro, kedai dalam talian UK dan AS telah menyenaraikan sarung telefon produk dan mendedahkan reka bentuk serta saiz paparan telefon. Halaman menunjukkan sejumlah besar pemaparan sarung telefon Pixel 9 Pro Fold

Telefon lipat Samsung 10,000 yuan W25 didedahkan: kamera hadapan bawah skrin 5 megapiksel dan badan lebih nipis Aug 23, 2024 pm 12:43 PM

Menurut berita pada 23 Ogos, Samsung akan melancarkan telefon bimbit lipat W25 baharu, yang dijangka akan diumumkan pada penghujung September Ia akan membuat penambahbaikan yang sepadan dalam kamera hadapan bawah skrin dan ketebalan badan. Menurut laporan, Samsung W25, dengan nama kod Q6A, akan dilengkapi dengan kamera bawah skrin 5 megapiksel, yang merupakan penambahbaikan berbanding kamera 4 megapiksel siri Galaxy Z Fold. Selain itu, kamera hadapan skrin luaran W25 dan kamera sudut ultra lebar masing-masing dijangka 10 juta dan 12 juta piksel. Dari segi reka bentuk, W25 adalah kira-kira 10 mm tebal dalam keadaan terlipat, iaitu kira-kira 2 mm lebih nipis daripada Galaxy Z Fold 6 standard. Dari segi skrin, W25 mempunyai skrin luaran 6.5 inci dan skrin dalaman 8 inci, manakala Galaxy Z Fold6 mempunyai skrin luaran 6.3 inci dan skrin dalaman 8 inci.

Model Samsung Galaxy Z Flip 6 pertama kali didedahkan: bezel lebih sempit, lipatan masih ada Jun 22, 2024 am 03:28 AM

Menurut berita pada 21 Jun, media asing baru-baru ini mengeluarkan gambar model Samsung Galaxy Z Flip 6 di Internet. Mengikut gambar, boleh difahamkan bahawa sempadan Samsung Galaxy Z Flip 6 akan dikecilkan lagi, yang bermaksud bahawa lebar telefon mungkin dikurangkan dalam keadaan terlipat, dan ia juga akan memberikan cengkaman dan mudah alih yang lebih selesa . Lebih-lebih lagi, berbanding dengan ZFlip5 generasi sebelumnya, model Galaxy ZFlip6 lebih segi empat sama dan modul kamera di bahagian belakang lebih menonjol. Ia dijangka menggunakan sensor kamera baharu. Walaubagaimanapun dari hadapan, lipatan telefon masih agak ketara, namun memandangkan model yang bocor adalah telefon model, mungkin ada sedikit perbezaan dengan telefon sebenar, jadi ia adalah untuk rujukan sahaja. Dari segi konfigurasi prestasi, Galaxy

Kelemahan terbesar telefon mudah alih skrin boleh lipat: tiada senario aplikasi teras Mar 16, 2024 am 09:04 AM

Apa yang kita bincangkan hari ini bukanlah seperti mana produk tertentu, tetapi kembali kepada topik "skrin lipat" itu sendiri dan meneroka "rasional" telefon bimbit skrin lipat. Pertama, mari kita lihat prestasi pasaran telefon bimbit skrin lipat Menurut laporan data terkini IDC, pasaran telefon bimbit skrin lipat China akan menghantar kira-kira 7.007 juta unit pada tahun 2023, peningkatan tahun ke tahun sebanyak 114.5%. Antaranya, pasaran telefon mudah alih skrin lipat China menghantar kira-kira 2.771 juta unit pada suku keempat 2023, peningkatan tahun ke tahun sebanyak 149.6%. Data itu kelihatan baik, dan pertumbuhannya juga sangat kukuh. Walau bagaimanapun, berbanding dengan kira-kira 270 juta penghantaran telefon pintar di pasaran China pada 2023, data ini sebenarnya tidak mencukupi. Secara umum

Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery? Feb 28, 2024 pm 03:12 PM

Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery? Dalam jQuery, kaedah menghantar permintaan PUT adalah serupa dengan menghantar jenis permintaan lain, tetapi anda perlu memberi perhatian kepada beberapa butiran dan tetapan parameter. Permintaan PUT biasanya digunakan untuk mengemas kini sumber, seperti mengemas kini data dalam pangkalan data atau mengemas kini fail pada pelayan. Berikut ialah contoh kod khusus menggunakan kaedah permintaan PUT dalam jQuery. Mula-mula, pastikan anda memasukkan fail perpustakaan jQuery, kemudian anda boleh menghantar permintaan PUT melalui: $.ajax({u

Adakah anda ingin tahu tentang lipatan perkataan? Mar 19, 2024 pm 07:49 PM

Selepas mengedit kandungan teks dalam Word, anda perlu melihat dan menyemak kandungan yang diedit. Jika terdapat banyak kandungan, adalah menyusahkan untuk membacanya. Bagaimana untuk menyelesaikan masalah ini, kaedah lipatan perkataan diperlukan. Izinkan saya berkongsi tutorial kaedah dengan anda semua! Mula-mula, buka dokumen Word pada komputer anda, masukkan kandungan yang diperlukan dan pilihnya, kemudian klik pilihan "Mula" dalam bar menu, dan kemudian pilih gaya untuk digunakan pada perenggan teks yang baru anda pilih. Anda boleh rujuk bahagian yang bertanda bulatan merah dalam gambar di bawah. 2. Kemudian, perenggan teks yang dipilih akan menukar gayanya dan menambah anak panah kecil, seperti yang ditunjukkan dalam bulatan merah dalam gambar di bawah: 3. Klik anak panah kecil untuk mengembangkan atau meruntuhkan perenggan teks yang dipilih sebelumnya secara bebas, atau terus Klik kanan , daripada

Petua jQuery: Cepat ubah suai teks semua teg pada halaman Feb 28, 2024 pm 09:06 PM

Tajuk: Petua jQuery: Cepat ubah suai teks semua teg pada halaman Dalam pembangunan web, kita selalunya perlu mengubah suai dan mengendalikan elemen pada halaman. Apabila menggunakan jQuery, kadangkala anda perlu mengubah suai kandungan teks semua teg dalam halaman sekaligus, yang boleh menjimatkan masa dan tenaga. Berikut akan memperkenalkan cara menggunakan jQuery untuk mengubah suai teks semua teg pada halaman dengan cepat, dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan fail perpustakaan jQuery dan memastikan bahawa kod berikut dimasukkan ke dalam halaman: &lt

Gunakan jQuery untuk mengubah suai kandungan teks semua teg Feb 28, 2024 pm 05:42 PM

Tajuk: Gunakan jQuery untuk mengubah suai kandungan teks semua teg jQuery ialah perpustakaan JavaScript yang popular yang digunakan secara meluas untuk mengendalikan operasi DOM. Dalam pembangunan web, kita sering menghadapi keperluan untuk mengubah suai kandungan teks tag pautan (tag) pada halaman. Artikel ini akan menerangkan cara menggunakan jQuery untuk mencapai matlamat ini dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan perpustakaan jQuery ke dalam halaman. Tambahkan kod berikut dalam fail HTML:

See all articles