Heim > Artikel > Web-Frontend > Implementierung einer akkordeonbasierten Erweiterung und Reduzierung des Navigationsmenüs basierend auf jQuery_jquery

Implementierung einer akkordeonbasierten Erweiterung und Reduzierung des Navigationsmenüs basierend auf jQuery_jquery

WBOYOriginal: 2016-05-16 15:17:091238Durchsuche

In diesem Kapitel wird ein Codebeispiel vorgestellt, das den Effekt des Erweiterns und Reduzierens des Navigationsmenüs im Akkordeonmodus implementiert.

Das Codebeispiel lautet wie folgt:

代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style>
dl{width:150px;}
dl,dd{margin:0;}
dt{
 background:gray;
 font-size:14px;
 padding:2px;
 margin:2px;
}
dt{color:#FFF;}
dd a{
 color:#000;
 font-size:12px;
}
ul{
 list-style:none;
 padding:2px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
 $("dd:not(:first)").hide();
 $("dt a").click(function(){
  $("dd:visible").slideUp("slow");
  $(this).parent().next().slideDown("slow");
  return false;
 });
});
</script>
</head>
<body>
<dl>
 <dt><a href="#">脚本之家一</a></dt>
 <dd>
  <ul>
   <li><a href="#">div教程</a></li>
   <li><a href="#">css教程</a></li>
   <li><a href="#">jquery教程</a></li>
  </ul>
 </dd>
 <dt><a href="#">脚本之家二</a></dt>
 <dd>
  <ul>
   <li><a href="#">正则教程</a></li>
   <li><a href="#">脚本之家</a></li>
  </ul>
 </dd>
 <dt><a href="#">脚本之家三</a></dt>
 <dd>
  <ul>
   <li><a href="#">ajax教程</a></li>
   <li><a href="#">softwhy.com</a></li>
   <li><a href="#">js教程</a></li>
  </ul>
 </dd>
</dl>
</body>
</html>

Der obige Code erfüllt unsere Anforderungen. Hier finden Sie eine Einführung in seinen Implementierungsprozess.

1. Codekommentare:

(1).$(document).ready(function(){}), wenn die Dokumentstruktur vollständig geladen ist, führen Sie den Code in der Funktion aus.
(2).$("dd:not(:first)").hide(), alle dd-Elemente außer dem ersten dd-Element werden ausgeblendet, dh das Untermenü des ersten Navigationsmenüs wird erweitert und die anderen werden ausgeblendet .
(3).$("dt a").click(function(){}), registrieren Sie die Klickereignisverarbeitungsfunktion für das a-Element unter dem dt-Element.
(4).$("dd:visible").slideUp("slow"), alle angezeigten dd-Elemente werden durch Animation verkleinert und ausgeblendet.
(5).$(this).parent().next().slideDown("slow"), das aktuell mit dem a-Element verbundene übergeordnete Element ist das dt-Element und das nächste Element des dt-Elements ist das sekundäre Menü dd-Element. Dieses Menü wird animiert erweitert.
(6).return false, dies ist sehr wichtig, um zu verhindern, dass der Link springt.

Das Obige ist, was ich mit Ihnen teile, wie Sie das Navigationsmenü im Akkordeonmodus basierend auf jQuery erweitern und reduzieren können. Ich hoffe, es wird für alle hilfreich sein.

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：Ausführliche Erläuterung der Verwendung und Unterschiede dieses Aufrufs und der Anwendung in JavaScriptNächster Artikel：Ausführliche Erläuterung der Verwendung und Unterschiede dieses Aufrufs und der Anwendung in JavaScript

In Verbindung stehende Artikel

Mehr sehen