jQuery implémente le menu déroulant secondaire effect

jQuery implémente le menu déroulant secondaire effect_jquery

WBOY

Libérer： 2016-05-16 15:21:53

original

1290 Les gens l'ont consulté

Tout le monde sait que jQuery est un framework qui encapsule JS pour le rendre plus pratique à utiliser. Les deux articles de blog précédents ont été implémentés respectivement à l'aide des styles CSS et JS. Cet article utilise donc jQuery pour implémenter le menu déroulant secondaire.
Les connaissances requises pour implémenter l'utilisation de JQuery sont :

1) Utilisez $(function(){...}) pour obtenir l'élément HTML sur lequel vous souhaitez agir.
2) Recherchez les éléments enfants en utilisant la méthode children().
3) Affichez les éléments HTML en utilisant la méthode show().
4) Masquez les éléments HTML en utilisant la méthode hide().
5) Méthode de référence de la bibliothèque jQuery :

La première méthode : Téléchargez la bibliothèque jQuery sur votre ordinateur puis citez-la. J'ai téléchargé la version jquery-1.7.1.min.js.
Par exemple :
La deuxième méthode : Référencez directement le fichier de la bibliothèque jQuery sur le serveur en ligne, tel que la bibliothèque jQuery du serveur Google, la bibliothèque jQuery du serveur Baidu, etc.
Citation du fichier de la bibliothèque jQuery sur le serveur Baidu
Jetons un coup d'œil au processus de production :
1. Appelez la bibliothèque jQuery : écrivez du code et référencez la bibliothèque jQuery. Depuis que Google s'est retiré de la Chine continentale, il est recommandé d'utiliser la bibliothèque jQuery du serveur Baidu. Remarque : adresse de la bibliothèque jQuery du serveur Baidu : http://libs.baidu.com/jquery/1.9.0/jquery.js 2. Écrivez une fonction pour afficher le sous-menu, utilisez $ et obtenez le menu de premier niveau li via le nom de la classe, utilisez children() pour trouver l'élément enfant ul de li et utilisez la méthode show() pour afficher le deuxième menu de niveau.
3. Écrivez une fonction de sous-menu cachée, utilisez $ et obtenez le menu de premier niveau li via le nom de la classe, utilisez children() pour trouver l'élément enfant ul de li et utilisez la méthode hide() pour masquer le deuxième niveau. menu.
4. Effectuez des tests de compatibilité des navigateurs, au moins cinq navigateurs. IE7,8,9, Firefox, Google, navigateur 2345, etc.

Jetons d'abord un coup d'œil aux rendus :

Enfin, regardons le code, qui n'est pas très différent du précédent :
Code HTML :

Code du fichier style.css externe de la feuille de 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>

Copier après la connexion

Script externe du script JS, code du fichier 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; 
}

Copier après la connexion

J'espère que cet article sera utile à tous ceux qui apprennent la programmation jquery.

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

Copier après la connexion