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 相关文章推荐
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
Jun 14 Javascript
js 覆盖和重载 函数
Sep 25 Javascript
使用jquery解析XML的方法
Sep 05 Javascript
jqGrid用法汇总(全经典)
Jun 28 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
javascript中的 object 和 function小结
Aug 14 Javascript
JSP防止网页刷新重复提交数据的几种方法
Nov 19 Javascript
javascript数组去重方法分析
Dec 15 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
vue组件命名和props命名代码详解
Sep 01 Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 Javascript
JavaScript经典案例之简易计算器
Aug 24 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
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
php解析url的三个示例
2014/01/20 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
基于JQuery的cookie插件
2010/04/07 Javascript
用js来获取上传的文件名纯粹是为了美化而用
2013/10/23 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
jquery与prototype框架的详细对比
2013/11/21 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
JavaScript实现LI列表数据绑定的方法
2015/08/04 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
ES6中的箭头函数实例详解
2017/04/06 Javascript
浅谈原生JS中的延迟脚本和异步脚本
2017/07/12 Javascript
元素全屏的设置与监听实例
2017/11/28 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
JS中准确判断变量类型的方法
2020/06/01 Javascript
Python实现将DOC文档转换为PDF的方法
2015/07/25 Python
Python爬取APP下载链接的实现方法
2016/09/30 Python
python3之微信文章爬虫实例讲解
2017/07/12 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
Pandas中resample方法详解
2019/07/02 Python
django 模型中的计算字段实例
2020/05/19 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
美国购买和销售礼品卡平台:Raise
2017/01/13 全球购物
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
工艺员岗位职责
2014/02/11 职场文书
搞笑爱情保证书
2014/04/29 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
结婚十年感言
2015/07/31 职场文书
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript