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.
