jQuery implementiert das sekundäre Dropdown-Menü effect

jQuery implementiert das sekundäre Dropdown-Menü effect_jquery

WBOY

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

Original

1284 Leute haben es durchsucht

Jeder weiß, dass jQuery ein Framework ist, das JS kapselt, um die Verwendung komfortabler zu machen. Die beiden vorherigen Blogbeiträge wurden mit CSS-Stilen bzw. JS implementiert, daher verwendet dieser Artikel jQuery, um das sekundäre Dropdown-Menü zu implementieren.
Die für die Implementierung mit JQuery erforderlichen Kenntnisse sind:

1) Verwenden Sie $(function(){...}), um das HTML-Element abzurufen, auf das Sie reagieren möchten.
2) Finden Sie untergeordnete Elemente mithilfe der Methode children().
3) Zeigen Sie HTML-Elemente mit der Methode show() an.
4) Verstecken Sie HTML-Elemente mit der Methode hide().
5) Referenzmethode der jQuery-Bibliothek:

Die erste Methode: Laden Sie die jQuery-Bibliothek auf Ihren Computer herunter und zitieren Sie sie dann. Ich habe die Version jquery-1.7.1.min.js heruntergeladen.
Zum Beispiel:
Die zweite Methode: Verweisen Sie direkt auf die jQuery-Bibliotheksdatei auf dem Online-Server, z. B. auf die jQuery-Bibliothek des Google-Servers, die jQuery-Bibliothek des Baidu-Servers usw.
Zitieren der jQuery-Bibliotheksdatei auf dem Baidu-Server
Werfen wir einen Blick auf den Produktionsprozess:
1. Rufen Sie die jQuery-Bibliothek auf: Schreiben Sie Code und verweisen Sie auf die jQuery-Bibliothek. Da sich Google vom chinesischen Festland zurückgezogen hat, empfiehlt es sich, die jQuery-Bibliothek des Baidu-Servers zu verwenden. \u003d Hinweis: Adresse der jQuery-Bibliothek des Baidu-Servers: http://libs.baidu.com/jquery/1.9.0/jquery.js 2. Schreiben Sie eine Funktion zum Anzeigen des Untermenüs, verwenden Sie $ und rufen Sie das Menü li der ersten Ebene über den Klassennamen ab, verwenden Sie children(), um das untergeordnete Element ul von li zu finden, und verwenden Sie die Methode show(), um das zweite Element anzuzeigen -Ebenenmenü.
3. Schreiben Sie eine versteckte Untermenüfunktion, verwenden Sie $ und rufen Sie das Menü der ersten Ebene li über den Klassennamen ab, verwenden Sie children(), um das untergeordnete Element ul von li zu finden, und verwenden Sie die Methode hide(), um das Menü der zweiten Ebene auszublenden Speisekarte.
4. Führen Sie Browserkompatibilitätstests durch, mindestens fünf Browser. IE7,8,9, Firefox, Google, 2345-Browser usw.

Werfen wir zunächst einen Blick auf die Renderings:

Schließlich werfen wir einen Blick auf den Code, der sich nicht wesentlich vom vorherigen unterscheidet:
HTML-Code:

CSS-Stylesheet, externer Dateicode 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>

Nach dem Login kopieren

JS-Skript externes Skript, JS-Dateicode:

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

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die die JQuery-Programmierung erlernen.

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

Nach dem Login kopieren