Heim > Artikel > Web-Frontend > jQuery implementiert das sekundäre Dropdown-Menü effect_jquery

jQuery implementiert das sekundäre Dropdown-Menü effect_jquery

WBOYOriginal: 2016-05-16 15:21:531228Durchsuche

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: bf0fa432b619e09efe0b46f9023206352cacc6d41bbb37262a98f745aa00fbf0
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>

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

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(); 
  }) 
})

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 einfach wie effect_jqueryNächster Artikel：jQuery implementiert einfach wie effect_jquery

In Verbindung stehende Artikel

Mehr sehen