jQuery树形下拉菜单特效代码分享

前端技术 2023/09/01 JavaScript

本文实例讲述了jQuery实现幻树形下拉菜单特效，实现自动伸缩，分享给大家供大家参考。

运行jQuery树形下拉菜单特效效果图：

为大家分享的jQuery树形下拉菜单代码如下


<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.phpstudy.net/\"> phpstudy </a></li>
  <li><a href=\"http://www.phpstudy.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.phpstudy.net/list/list_21_1.htm\">ASP.NET</a></li>
  <li> <a href=\"http://www.phpstudy.net/list/index_104.htm\">数据库</a></li>
 </ul>
 </div>
 <div class=\"menuTitle\">
 下载模块
 </div>
 <div class=\"menuContent\">
 <ul>
  <li> <a href=\"http://www.phpstudy.net/\">phpstudy </a></li>
  <li> <a href=\"http://www.phpstudy.net/codes/\">源码下载</a></li>
  <li> <a href=\"http://www.phpstudy.net/books/\">电子书籍</a></li>
 </ul>
 </div>
</div>


</body>
</html>

以上就是为大家分享的jQuery树形下拉菜单代码，希望大家可以喜欢。

本文地址：https://www.stayed.cn/item/2362

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案