recherche

Maison >interface Web >js tutoriel >js implémente le code d'effet du menu déroulant qui clique pour développer les compétences down_javascript

js implémente le code d'effet du menu déroulant qui clique pour développer les compétences down_javascript

WBOY
WBOYoriginal
2016-05-16 15:41:211544parcourir

L'exemple de cet article décrit le code js qui implémente l'effet de menu déroulant consistant à cliquer vers le bas pour développer. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Voici le code js pour implémenter le code des effets spéciaux du menu déroulant d'extension clic. Aucun jQuery n'est appelé. C'est un vrai menu déroulant JS. La compatibilité n'a pas été testée. vous pouvez le tester et le corriger vous-même. Cet article fournit uniquement le code de base à titre de référence.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/js-click-show-down-menu-style-codes/

Le code spécifique est le suivant : 

<!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>
<style type="text/css">
*{margin:0; padding:0}
#nav{width:200px; margin:50px}
#nav h3{ cursor:pointer; line-height:30px; height:30px; background-color:#000000; color:#fff}
#nav a{display:block; line-height:24px;color:#666666}
#nav a:hover{background-color:#eee; color:#000;}
#nav div{display:none; border:1px solid #000; border-top:none}
</style>
<script type="text/javascript">
function $(id){return document.getElementById(id)}
window.onload = function(){
 $("nav").onclick = function(e){
 var src = e&#63;e.target:event.srcElement;
 if(src.tagName == "H3"){
  var next = src.nextElementSibling || src.nextSibling;
  next.style.display = (next.style.display =="block")&#63;"none":"block";
 }
 }
}
</script>
</head>
<body>
<div id="nav">
 <h3>管理区</h3>
  <div>
   <a href="#">建议</a>
    <a href="#">链接</a>
    <a href="#">联系</a>
  </div>
  <h3>交流区</h3>
  <div>
   <a href="#">JavaScript</a>
    <a href="#">Delphi</a>
    <a href="#">VC++</a>
  </div>
</div>
</body>
</html>

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：jQuery implémente l'effet de menu déroulant secondaire standard de style gris-bleu code_jqueryArticle suivant：jQuery implémente l'effet de menu déroulant secondaire standard de style gris-bleu code_jquery

Articles Liés

Voir plus