suchen

Heim >Web-Frontend >js-Tutorial >jQuery-Baum-Dropdown-Menü, Spezialeffektcode, Sharing_jquery

jQuery-Baum-Dropdown-Menü, Spezialeffektcode, Sharing_jquery

WBOY
WBOYOriginal
2016-05-16 15:44:571143Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie jQuery den Dropdown-Menüeffekt „Magischer Baum“ implementiert und die automatische Skalierung realisiert. Ich möchte es Ihnen als Referenz vorstellen.

Spezialeffekt-Rendering im jQuery-Baum-Dropdown-Menü ausführen:

Der für Sie freigegebene jQuery-Baum-Dropdown-Menücode lautet wie folgt


<head>

<title>常用的jquery下拉菜单</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
 $(document).ready(
 function() 
 {
 $(".menuTitle").click(function(){
  $(this).next("div").slideToggle("slow")
  .siblings(".menuContent:visible").slideUp("slow");
  $(this).toggleClass("activeTitle");
  $(this).siblings(".activeTitle").removeClass("activeTitle");
 });
 });
 
</script>
<style type="text/css">
 body
 {
 margin:0;background-color:#9ad075;
 }
 .container
 {
 width:100%; text-align:center;
 }
 .menuTitle
 {
 width:148px; height:25px; background-image:url(images/expand.gif); margin:0 auto; line-height:25px; font-size:12.7px; font-weight:bold;color:#43860c; cursor:pointer; margin-top:6px;
 }
 .activeTitle
 {
 width:148px; height:25px; background-image:url(images/fold.gif); margin:0 auto; line-height:25px; font-size:12.7px; font-weight:bold;color:#43860c; cursor:pointer; margin-top:6px;
 }
 .menuContent
 {
 background-color:#fff; margin:0 auto; height:auto; width:148px; text-align:left; display:none;
 }
 li
 {
  background:url(images/arr.gif) no-repeat 20px 6px ; list-style-type:none;padding:0px 0px 0px 38px; font-size:12.7px; height:20px; line-height:20px;
 }
 ul
 {
 margin:0;padding:0;
 }
</style>
</head>
<body>
<div class="container">
 <div class="menuTitle">
 资源库
 </div>
 <div class="menuContent">
 <ul>
  <li> <a href="#">欢迎访问</a></li>
  <li><a href="http://www.jb51.net/"> 脚本之家 </a></li>
  <li><a href="http://www.jb51.net/list/index_1.htm"> 网络编程</a></li>
 </ul>
 </div>
 <div class="menuTitle">
 文章模块
 </div>
 <div class="menuContent">
 <ul>
  <li> <a href="#">前端技术</a></li>
  <li> <a href="http://www.jb51.net/list/list_21_1.htm">ASP.NET</a></li>
  <li> <a href="http://www.jb51.net/list/index_104.htm">数据库</a></li>
 </ul>
 </div>
 <div class="menuTitle">
 下载模块
 </div>
 <div class="menuContent">
 <ul>
  <li> <a href="http://www.jb51.net/">脚本之家 </a></li>
  <li> <a href="http://www.jb51.net/codes/">源码下载</a></li>
  <li> <a href="http://www.jb51.net/books/">电子书籍</a></li>
 </ul>
 </div>
</div>


</body>
</html>

Das Obige ist der mit Ihnen geteilte jQuery-Baum-Dropdown-Menücode. Ich hoffe, er gefällt Ihnen.

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：Detaillierte Erläuterung der Probleme mit data(), enter() und exit() in D3.js_javascript-KenntnissenNächster Artikel：Detaillierte Erläuterung der Probleme mit data(), enter() und exit() in D3.js_javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen