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-简单的计算器实现步骤分解(附图)
May 30 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
Jan 02 Javascript
javascript中html字符串转化为jquery dom对象的方法
Aug 27 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
Sep 21 Javascript
微信小程序  简单实例(阅读器)的实例开发
Sep 29 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
Sep 18 Javascript
妙用缓存调用链实现JS方法的重载
Apr 30 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
Jun 04 Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 13 Javascript
jQuery操作动画完整实例分析
Jan 10 jQuery
JSON stringify方法原理及实例解析
Oct 23 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概述.
2006/10/09 PHP
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
php实现的美国50个州选择列表实例
2015/04/20 PHP
PHP错误机制知识汇总
2016/03/24 PHP
php错误日志简单配置方法
2016/07/11 PHP
php删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
细说浏览器特性检测(2)-通用事件检测
2010/11/05 Javascript
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
JS实现的碰撞检测与周期移动完整示例
2019/09/02 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
微信小程序获取当前时间及星期几的实例代码
2020/09/20 Javascript
element中Steps步骤条和Tabs标签页关联的解决
2020/12/08 Javascript
python清除字符串里非数字字符的方法
2015/07/02 Python
Python内置函数 next的具体使用方法
2017/11/24 Python
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
windows7 32、64位下python爬虫框架scrapy环境的搭建方法
2018/11/29 Python
python Shapely使用指南详解
2020/02/18 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
普通PHP程序员笔试题
2016/01/01 面试题
幼儿生日活动方案
2014/08/27 职场文书
运动会开幕词
2015/01/28 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
执行力心得体会范文
2016/01/11 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书