jQuery melaksanakan menu drop-down sekunder effect

jQuery melaksanakan menu drop-down sekunder effect_jquery

WBOY

Lepaskan： 2016-05-16 15:21:53

asal

1273 orang telah melayarinya

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

Salin selepas log masuk

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; 
}

Salin selepas log masuk

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(); 
  }) 
})

Salin selepas log masuk