JavaScript implémente l'affichage et le masquage des compétences du menu déroulant

JavaScript implémente l'affichage et le masquage des compétences du menu déroulant_javascript

WBOY

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

original

1528 Les gens l'ont consulté

Dans cet article, nous utiliserons un script JavaScript pour afficher et masquer le menu déroulant. Les connaissances que nous devons mettre en œuvre à l'aide des méthodes JavaScript sont :
1) Événements JS : événement de passage de souris onmouseover et événement de sortie de souris onmouseout.
2) Syntaxe de base JS : utilisez le mot-clé function pour définir les fonctions.
3) Programmation DOM : méthode getElementsByTagName().
Ensuite, la prochaine étape est notre processus de production :
1) Masquer le menu secondaire : définissez le style CSS pour masquer le menu secondaire.
2) Écrivez la fonction showsub() pour afficher le sous-menu : utilisez getElementsByTagName pour obtenir les éléments du menu secondaire ; définissez l'affichage du menu secondaire via style.display.
3) Écrivez la fonction hidesub() du sous-menu caché : utilisez getElementsByTagName pour obtenir les éléments du menu secondaire pour qu'ils soient masqués via style.display.
4) Ajouter des événements de souris : ajoutez des événements de souris au menu de premier niveau avec un menu de deuxième niveau et appelez la fonction showsub()/hidesub() pour réaliser l'affichage et le masquage du menu de deuxième niveau lorsque la souris passe par là. le menu de premier niveau.
5) Effectuez des tests de compatibilité des navigateurs, au moins cinq navigateurs. IE7,8,9, Firefox, Google, navigateur 2345, etc.

Rendu :

Code HTML :

<span style="font-size:18px;"><!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> 
<!--引入的外部CSS样式文件--> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
<!--引入的外部JS脚本文件--> 
<script type="text/javascript" src="script.js"></script> 
</head> 
 
<body> 
<div id="nav" class="nav"> 
 <ul> 
  <li><a href="#">网站首页</a></li> 
  <li onmouseover="showsub(this)" onmouseout="hidesub(this)"><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 onmouseover="showsub(this)" onmouseout="hidesub(this)"><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> 
</span>

Copier après la connexion

Code du fichier style.css de la feuille de style CSS externe :

<span style="font-size:18px;">/*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; 
} 
</span>

Copier après la connexion

Code du fichier script.js du script JS externe :

<span style="font-size:18px;">function showsub(li){ 
 var submenu=li.getElementsByTagName("ul")[0]; 
 submenu.style.display="block"; 
} 
function hidesub(li){ 
 var submenu=li.getElementsByTagName("ul")[0]; 
 submenu.style.display="none"; 
}</span>

Copier après la connexion

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun et permettra d’obtenir l’effet de menu déroulant.