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 相关文章推荐
jcrop基本参数一览
Jul 16 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
Aug 13 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
Jul 22 Javascript
对Js OOP编程 创建对象的一些全面理解
Jul 26 Javascript
Angular.Js中ng-include指令的使用与实现
May 07 Javascript
Vue通过input筛选数据
Oct 26 Javascript
在使用JSON格式处理数据时应该注意的问题小结
May 20 Javascript
js数组方法reduce经典用法代码分享
Jan 07 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 Javascript
Element Notification通知的实现示例
Jul 27 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 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
php $_SERVER windows系统与linux系统下的区别说明
2014/02/14 PHP
javascript中的有名函数和无名函数
2007/10/17 Javascript
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
用jquery和json从后台获得数据集的代码
2011/11/07 Javascript
JS数组的赋值介绍
2014/03/10 Javascript
node.js中的path.join方法使用说明
2014/12/08 Javascript
分享一则javascript 调试技巧
2015/01/02 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
Js获取图片原始宽高的实现代码
2016/05/17 Javascript
Jquery通过ajax请求NodeJS返回json数据实例
2016/11/08 NodeJs
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
javascript 中模板方法单例的实现方法
2017/10/17 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
2018/01/08 Javascript
JS实现简单的点赞与踩功能示例
2018/12/05 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
[44:50]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第二局
2016/02/26 DOTA
在IIS服务器上以CGI方式运行Python脚本的教程
2015/04/25 Python
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
python动态参数用法实例分析
2015/05/25 Python
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
Python实现曲线拟合操作示例【基于numpy,scipy,matplotlib库】
2018/07/12 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
主题班会演讲稿
2014/05/22 职场文书
运动会主持人开幕词
2016/03/04 职场文书
css背景和边框标签实例详解
2021/05/21 HTML / CSS
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python