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


Posted in Javascript onAugust 15, 2015

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

运行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="https://3water.com/"> 三水点靠木 </a></li>
  <li><a href="https://3water.com/list/index_1.htm"> 网络编程</a></li>
 </ul>
 </div>
 <div class="menuTitle">
 文章模块
 </div>
 <div class="menuContent">
 <ul>
  <li> <a href="#">前端技术</a></li>
  <li> <a href="https://3water.com/list/list_21_1.htm">ASP.NET</a></li>
  <li> <a href="https://3water.com/list/index_104.htm">数据库</a></li>
 </ul>
 </div>
 <div class="menuTitle">
 下载模块
 </div>
 <div class="menuContent">
 <ul>
  <li> <a href="https://3water.com/">三水点靠木 </a></li>
  <li> <a href="https://3water.com/codes/">源码下载</a></li>
  <li> <a href="https://3water.com/books/">电子书籍</a></li>
 </ul>
 </div>
</div>


</body>
</html>

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

Javascript 相关文章推荐
JavaScript delete操作符应用实例
Jan 13 Javascript
JavaScript 对象模型 执行模型
Dec 06 Javascript
jquery如何通过name名称获取当前name的value值
Dec 20 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
移动适配的几种方案(三种方案)
Nov 25 Javascript
js实现自动图片轮播代码
Mar 22 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
React props和state属性的具体使用方法
Apr 12 Javascript
vue观察模式浅析
Sep 25 Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 Javascript
JS Thunk 函数的含义和用法实例总结
Apr 08 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
Aug 15 #Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
Nov 18 #Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
Aug 15 #Javascript
js漂浮广告实现代码
Aug 15 #Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 #Javascript
针对初学者的jQuery入门指南
Aug 15 #Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 #Javascript
You might like
按上下级层次关系输出内容的PHP代码
2010/07/17 PHP
解析PHP 使用curl提交json格式数据
2013/06/29 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
php强制下载文件函数
2016/08/24 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
javascript第一课
2007/02/27 Javascript
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
jquery乱码与contentType属性设置问题解决方案
2013/01/07 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
2015/09/01 Javascript
JavaScript中获取时间的函数集
2016/08/16 Javascript
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
vue实现购物车的小练习
2020/12/21 Vue.js
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
python链接oracle数据库以及数据库的增删改查实例
2018/01/30 Python
Python比较2个时间大小的实现方法
2018/04/10 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
《纸船和风筝》教学反思
2014/02/15 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python
Python使用Kubernetes API访问集群
2021/05/30 Python