suchen

Heim  >  Artikel  >  Web-Frontend  >  jQuery implementiert das erweiterbare und reduzierte Akkordeon-Panel „menu_jquery'.

jQuery implementiert das erweiterbare und reduzierte Akkordeon-Panel „menu_jquery'.

WBOY
WBOYOriginal
2016-05-16 15:39:161269Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie jQuery ein Akkordeon-Panel-Menü implementiert, das erweitert und reduziert werden kann. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein übliches Faltmenü, ein Akkordeon-Faltfeld, das sich mit einem Flash-Animationseffekt erweitern und verkleinern lässt. Bitte beachten Sie beim Ändern:

slideUp: Blendet alle übereinstimmenden Elemente dynamisch aus, indem ihre Höhe geändert wird (nach oben abnimmt), und löst optional eine Rückruffunktion aus, nachdem das Ausblenden abgeschlossen ist. Dieser Animationseffekt passt nur die Höhe des Elements an, sodass passende Elemente „gleitend“ ausgeblendet werden können.

slideDown: Zeigt alle passenden Elemente dynamisch durch Höhenänderungen an (zunehmend nach unten) und löst optional eine Rückruffunktion aus, nachdem die Anzeige abgeschlossen ist. Dieser Animationseffekt passt nur die Höhe des Elements an, sodass die passenden Elemente „gleitend“ angezeigt werden können

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/jquery-slide-up-down-sfq-style-menu-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>
<head>
<title>折叠菜单</title>
<script src="jquery1.3.2.js"></script>
<script>
$(document).ready(function(){
$("dd:not(:first)").hide(); //隐藏 dd不是第一个的. E:first:相当于E:eq(0) 
// $("dd:not(:last)").hide(); //试试$("dd:not(:last)").hide();
$("dt a").click(function(){
$("dd:visible").slideUp("slow");
 $(this).parent().next().slideDown("slow");
return false;
});
});
</script> 
<style>
 dl { width: 150px; }
 dl,dd { margin: 0; }
 dt { background: gray; font-size: 14px; padding: 2px; margin: 2px; }
 dt a { color: #FFF; }
 dd a { color: #000;font-size: 12px; }
 ul { list-style: none; padding: 2px; }
</style>
</head>
<body>
<dl>
<dt><a href="#">ASP</a></dt>
 <dd>
 <ul>
  <li><a href="#">论坛社区</a></li>
  <li><a href="#">新闻文章</a></li>
  <li><a href="#">企业网站</a></li>
 </ul>
 </dd>
<dt><a href="#">PHP</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="#">JQUERY</a></li>
  <li><a href="#">JAVASCRIPT</a></li>
 </ul>
 </dd>
</dl>
</body>
</html>

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung 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 einfach den zweistufigen Dropdown-Menüeffekt code_jqueryNächster Artikel：jQuery implementiert einfach den zweistufigen Dropdown-Menüeffekt code_jquery

In Verbindung stehende Artikel

Mehr sehen