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与C# Windows应用程序交互方法
Jun 29 Javascript
javascript下arguments,caller,callee,call,apply示例及理解
Dec 24 Javascript
jQuery移除元素自动解绑事件实现思路及代码
May 31 Javascript
使用命令对象代替switch语句的写法示例
Feb 28 Javascript
基于jQuery实现火焰灯效果导航菜单
Jan 04 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
vue复合组件实现注册表单功能
Nov 06 Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
js 将线性数据转为树形的示例代码
May 28 Javascript
Vue分页插件的前后端配置与使用
Oct 09 Javascript
JS前端轻量fabric.js系列之画布初始化
Aug 05 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提交后跳转
2013/06/23 PHP
PHP使用pcntl_fork实现多进程下载图片的方法
2014/12/16 PHP
php与Mysql的一些简单的操作
2015/02/26 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
html组件不可输入(只读)同时任何组件都有效
2013/04/01 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
2015/08/24 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
2016/05/05 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
input输入密码变黑点密文的实现方法
2017/01/09 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
bootstrap日期插件daterangepicker使用详解
2017/10/19 Javascript
vue 父组件中调用子组件函数的方法
2019/06/06 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
python实现百度关键词排名查询
2014/03/30 Python
Python获取脚本所在目录的正确方法
2014/04/15 Python
pygame学习笔记(5):游戏精灵
2015/04/15 Python
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
python学生管理系统开发
2019/01/30 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
int和Integer有什么区别
2013/05/25 面试题
高一家长会邀请函
2014/01/12 职场文书
《油菜花开了》教学反思
2014/02/22 职场文书
工厂门卫岗位职责范本
2014/04/04 职场文书
合伙经营协议书范本
2014/04/18 职场文书
俞敏洪一分钟演讲稿
2014/08/26 职场文书
安全在我心中演讲稿
2014/09/01 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
资料员岗位职责
2015/02/10 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
postgreSQL数据库基础知识介绍
2022/04/12 PostgreSQL