suchen

Heim  >  Artikel  >  Web-Frontend  >  js implementiert den Dropdown-Menü-Effektcode, der durch Klicken erweitert wird, um die Fähigkeiten von down_javascript zu erweitern

js implementiert den Dropdown-Menü-Effektcode, der durch Klicken erweitert wird, um die Fähigkeiten von down_javascript zu erweitern

WBOY
WBOYOriginal
2016-05-16 15:41:211525Durchsuche

Das Beispiel in diesem Artikel beschreibt den JS-Code, der den Dropdown-Menüeffekt implementiert, der durch Klicken nach unten zum Erweitern entsteht. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier ist der js-Code zum Implementieren des Click-Down-Erweiterungs-Dropdown-Menüs. Es handelt sich um ein echtes JS-Dropdown-Menü. Die Kompatibilität wurde nicht getestet. Sie können es selbst testen und korrigieren. Dieser Artikel enthält nur grundlegenden Code als Referenz.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

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

Der spezifische Code lautet wie folgt: 

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

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jQuery implementiert den standardmäßigen sekundären Dropdown-Menüeffekt code_jquery im grau-blauen StilNächster Artikel：jQuery implementiert den standardmäßigen sekundären Dropdown-Menüeffekt code_jquery im grau-blauen Stil

In Verbindung stehende Artikel

Mehr sehen