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字典探测用户名工具
Oct 05 Javascript
事件模型在各浏览器中存在差异
Oct 20 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
Jun 18 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
Aug 07 Javascript
JS实现控制表格行文本对齐的方法
Mar 30 Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
May 28 Javascript
js仿支付宝多方框输入支付密码效果
Sep 27 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
Dec 08 Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 Javascript
Element Input组件分析小结
Oct 11 Javascript
vue-router路由模式详解(小结)
Aug 26 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&amp;java(三)
2006/10/09 PHP
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
php微信公众号开发之简答题
2018/10/20 PHP
JS文本框不能输入空格验证方法
2013/03/19 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
javascript事件模型实例分析
2015/01/30 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
巧用canvas
2017/01/21 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
微信小程序带动画弹窗组件使用方法详解
2018/11/27 Javascript
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
vue props 一次传多个值实例
2020/07/22 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
[17:45]DOTA2 HEROES教学视频教你分分钟做大人-军团指挥官
2014/06/11 DOTA
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场
2018/04/06 DOTA
python实现自动更换ip的方法
2015/05/05 Python
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
详解Python 切片语法
2019/06/10 Python
python matplotlib拟合直线的实现
2019/11/19 Python
python加载自定义词典实例
2019/12/06 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
城建学院毕业生自荐信
2014/01/31 职场文书
新任教师自我鉴定
2014/02/24 职场文书
2014年实验室工作总结
2014/12/03 职场文书
田径运动会通讯稿
2015/07/18 职场文书
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python
SpringBoot整合JWT的入门指南
2021/06/29 Java/Android
Python实现视频自动打码的示例代码
2022/04/08 Python
Redis基本数据类型Zset有序集合常用操作
2022/06/01 Redis