Heim > Artikel > Web-Frontend > jquery implementiert den vollständigen Code von tree menu_jquery

jquery implementiert den vollständigen Code von tree menu_jquery

WBOYOriginal: 2016-05-16 15:22:441541Durchsuche

Dieses Beispiel implementiert ein baumförmiges dynamisches Menü und ist mit IE8, Firefox, Chrome und anderen Browsern kompatibel. Es wird die toggle()-Methode von jQuery verwendet. Der Effekt und der Code lauten 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>jquery的树形菜单代码 </title>
<meta name="keywords" content="www.cnblogs.com/jihua"/>
<style type="text/css">
body { font-family:"宋体"; font-size: 12px; line-height: 1.5em; color:#7FB0C8; padding:0; margin:0; background: #336699;}
ul,ol,li,dl,dt,dd { margin:0; padding:0; list-style-type:none;}
h1,h2,h3,form,input,iframe,span { margin:0; padding:0;} 
a { color:#7FB0C8;}
a:link {color: #7FB0C8; TEXT-DECORATION: none;}
a:visited {color: #7FB0C8; TEXT-DECORATION: none;}
a:hover {color: #fff; TEXT-DECORATION: none;}
.white { color:#fff;}
.white a:link {color: #fff; TEXT-DECORATION: none;}
.white a:visited {color: #fff; TEXT-DECORATION: none;}
.white a:hover {color: #73E1F5; TEXT-DECORATION: none;}
/* 树形菜单开始 */
.close { float:right; clear:right; font-size:12px; font-weight:normal; cursor:pointer; padding-right:10px;}
.title { font-size:14px; color:#fff; margin-bottom:10px; padding-left:5px; width:290px;}
.menu { width:290px; height:330px; margin-bottom:10px;}

.l1 { background:#000; font-size:13px; padding:5px 0 0 30px; height:20px; margin-bottom:5px; cursor:pointer;}
.slist { margin:0 0 5px 0; display:none;}
.l2 { padding:0 0 0 35px; font-size:13px;}
.l2 a { padding:6px 0 0 5px; width:230px; height:21px; display:block;} 
.currentl2 a,.l2 a:hover { background:#1E5A82; color:#fff;}
.sslist { background:#156890; width:235px; overflow:hidden; margin:0 0 5px 35px; display:none;}
.l3 a { padding:6px 0 0 5px; width:230px; height:20px; display:block;} 
.currentl3 a,.l3 a:hover { color:#fff; font-weight:bold;}
</style>
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
 // 树状菜单
 $(document).ready(function () {
 $(".l1").toggle(function () {
  $(".slist").animate({ height: 'toggle', opacity: 'hide' }, "slow");
  $(this).next(".slist").animate({ height: 'toggle', opacity: 'toggle' }, "slow");
 }, function () {
  $(".slist").animate({ height: 'toggle', opacity: 'hide' }, "slow");
  $(this).next(".slist").animate({ height: 'toggle', opacity: 'toggle' }, "slow");
 });

 $(".l2").toggle(function () {
  $(this).next(".sslist").animate({ height: 'toggle', opacity: 'toggle' }, "slow");
 }, function () {
  $(this).next(".sslist").animate({ height: 'toggle', opacity: 'toggle' }, "slow");
 });

 $(".l2").click(function () {
  $(".l3").removeClass("currentl3");
  $(".l2").removeClass("currentl2");
  $(this).addClass("currentl2");
 });

 $(".l3").click(function () {
  $(".l3").removeClass("currentl3");
  $(this).addClass("currentl3");
 });

 $(".close").toggle(function () {
  $(".slist").animate({ height: 'toggle', opacity: 'show' }, "fast");
  $(".sslist").animate({ height: 'toggle', opacity: 'show' }, "fast");
 }, function () {
  $(".slist").animate({ height: 'toggle', opacity: 'hide' }, "fast");
  $(".sslist").animate({ height: 'toggle', opacity: 'hide' }, "fast");
 });
 });
</script>
</head>
<body>
<h1 class="title"><span class="close">全部收起/展开</span>Jihua树形菜单</h1>
<div class="menu">
 <h1 class="l1">一级菜单</h1>
 <div class="slist">
 <h2 class="l2"><a href="#">二级菜单</a></h2>
 <ul class="sslist">
 <li class="l3"><a href="#">·三级菜单</a></li>
 <li class="l3"><a href="#">·三级菜单</a></li>
 <li class="l3"><a href="#" target="_blank">·jihua.cnblogs.com</a></li>
 <li class="l3"><a href="#">·三级菜单</a></li>
 </ul>
 <h2 class="l2"><a href="#">二级菜单</a></h2>
 <ul class="sslist">
 <li class="l3"><a href="#">·三级菜单</a></li>
 <li class="l3"><a href="#">·三级菜单</a></li>
 <li class="l3"><a href="#" target="_blank">·三级菜单</a></li>
 <li class="l3"><a href="#">·三级菜单</a></li>
 </ul>
 <h2 class="l2"><a href="#">二级jb51.net</a></h2>
 </div>
 <h1 class="l1">一级脚本</h1>
 <div class="slist">
 <h2 class="l2"><a href="#">二级菜单计划</a></h2>
 <h2 class="l2"><a href="#">二级菜单</a></h2>
 <h2 class="l2"><a href="#">二级菜单</a></h2>
 </div>
 <h1 class="l1">一级菜单</h1>
 <div class="slist">
 <h2 class="l2"><a href="#">二级菜单</a></h2>
 <h2 class="l2"><a href="#">二级菜单</a></h2>
 <h2 class="l2"><a href="#">二级菜单</a></h2>
 </div>
</div>
</body>
</html>

In diesem Beispiel wird die toggle()-Methode von jquery verwendet, die wie folgt eingeführt wird:

Definition und Verwendung

Die Methode

toggle() schaltet den sichtbaren Zustand eines Elements um.

Ausgewählte Elemente ausblenden, wenn sie sichtbar sind, und anzeigen, wenn die ausgewählten Elemente ausgeblendet sind.

Grammatik
$(selector).toggle(speed,callback,switch)

Tipps und Hinweise

Hinweis: Dieser Effekt funktioniert bei Elementen, die über jQuery ausgeblendet sind, oder bei Elementen, die mit display:none in CSS deklariert wurden (jedoch nicht bei Elementen mit Visibility:hidden ).

Das Obige ist der vollständige Code für JQuery zum Implementieren des Baummenüs. Ich hoffe, dass er für alle hilfreich ist, die JQuery-Programmierung zu erlernen.

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：Highcharts verwendet einfache Beispiele und asynchrones dynamisches Lesen von data_javascript-FähigkeitenNächster Artikel：Highcharts verwendet einfache Beispiele und asynchrones dynamisches Lesen von data_javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen