Rumah > Artikel > hujung hadapan web > jQuery melaksanakan menu drop-down sekunder effect_jquery

jQuery melaksanakan menu drop-down sekunder effect_jquery

WBOYasal: 2016-05-16 15:21:531222semak imbas

Semua orang tahu bahawa jQuery ialah rangka kerja yang merangkum JS untuk menjadikannya lebih mudah untuk digunakan. Dua catatan blog sebelumnya telah dilaksanakan masing-masing menggunakan gaya CSS dan JS, jadi artikel ini menggunakan jQuery untuk melaksanakan menu lungsur turun kedua.
Pengetahuan yang diperlukan untuk melaksanakan menggunakan JQuery ialah:

1) Gunakan $(function(){...}) untuk mendapatkan elemen HTML yang anda mahu bertindak.
2) Cari elemen anak dengan menggunakan kaedah children().
3) Paparkan elemen HTML dengan menggunakan kaedah show().
4) Sembunyikan elemen HTML dengan menggunakan kaedah hide().
5) kaedah rujukan perpustakaan jQuery:

Kaedah pertama: Muat turun pustaka jQuery ke komputer anda dan kemudian sebutkan saya memuat turun versi jquery-1.7.1.min.js.
Contohnya: bf0fa432b619e09efe0b46f9023206352cacc6d41bbb37262a98f745aa00fbf0
Kaedah kedua: Rujuk terus fail perpustakaan jQuery pada pelayan dalam talian, seperti perpustakaan jQuery pelayan Google, perpustakaan jQuery pelayan Baidu, dsb.
Memetik fail perpustakaan jQuery pada pelayan Baidu
Mari kita lihat proses pengeluaran:
1. Panggil perpustakaan jQuery: tulis kod dan rujuk perpustakaan jQuery. Memandangkan Google telah menarik diri dari tanah besar China, adalah disyorkan untuk menggunakan perpustakaan jQuery pelayan Baidu. Nota: Alamat perpustakaan jQuery pelayan Baidu: http://libs.baidu.com/jquery/1.9.0/jquery.js 2. Tulis fungsi untuk memaparkan submenu, gunakan $, dan dapatkan menu peringkat pertama li melalui nama kelas, gunakan children() untuk mencari elemen anak ul li, dan gunakan kaedah show() untuk memaparkan yang kedua -menu peringkat.
3. Tulis fungsi submenu tersembunyi, gunakan $, dan dapatkan menu peringkat pertama li melalui nama kelas, gunakan children() untuk mencari elemen anak ul li, dan gunakan kaedah hide() untuk menyembunyikan tahap kedua menu.
4. Lakukan ujian keserasian pelayar, sekurang-kurangnya lima pelayar. IE7,8,9, Firefox, Google, pelayar 2345, dsb.

Mari kita lihat pemaparan dahulu:

Akhir sekali, mari kita lihat kod, yang tidak jauh berbeza daripada yang sebelumnya:
Kod HTML:

Kod fail gaya CSS luaran style.css:

<!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>下拉菜单</title> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
<!--引用百度服务器的jQuery库--> 
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
<script type="text/javascript" src="script.js"></script> 
</head> 
 
<body> 
<div id="nav" class="nav"> 
  <ul> 
    <li><a href="#">网站首页</a></li> 
   <li class="navmenu"><a href="#">课程大厅</a> 
    <ul> 
     <li><a href="#">JavaScript</a></li> 
     <li><a href="#">jQuery</a></li> 
     <li><a href="#">Ajax</a></li> 
    </ul> 
   </li> 
   <li class="navmenu"><a href="#">学习中心</a> 
    <ul> 
     <li><a href="#">视频学习</a></li> 
     <li><a href="#">案例学习</a></li> 
     <li><a href="#">交流平台</a></li> 
    </ul> 
   </li> 
   <li><a href="#">经典案例</a></li> 
   <li><a href="#">关于我们</a></li> 
  </ul> 
</div> 
</body> 
</html>

Skrip luaran skrip JS, kod fail js:

/*CSS全局设置*/ 
*{ 
 margin:0; 
 padding:0; 
} 
.nav{ 
 background-color:#EEEEEE; 
 height:40px; 
 width:450px; 
 margin:0 auto; 
} 
ul{ 
 list-style:none; 
} 
ul li{ 
 float:left; 
 line-height:40px; 
 text-align:center; 
} 
a{ 
 text-decoration:none; 
 color:#000000; 
 display:block; 
 width:90px; 
 height:40px; 
} 
a:hover{ 
 background-color:#666666; 
 color:#FFFFFF; 
} 
ul li ul li{ 
 float:none; 
 background-color:#EEEEEE; 
} 
ul li ul{ 
 display:none; 
} 
/*为了兼容IE7写的CSS样式，但是必须写在a:hover前面*/ 
ul li ul li a:link,ul li ul li a:visited{ 
 background-color:#EEEEEE; 
} 
ul li ul li a:hover{ 
 background-color:#009933; 
}

Saya harap artikel ini akan membantu semua orang yang mempelajari pengaturcaraan jquery.

$(function(){ 
  $(".navmenu").mouseover(function(){ 
   $(this).children("ul").show();  
  }) 
  
  $(".navmenu").mouseout(function(){ 
   $(this).children("ul").hide(); 
  }) 
})

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：jQuery melaksanakan mudah seperti effect_jqueryArtikel seterusnya：jQuery melaksanakan mudah seperti effect_jquery

Artikel berkaitan

Lihat lagi