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 相关文章推荐
初探jquery——表单应用范例
Feb 20 Javascript
Javascript 垃圾收集机制介绍理解
May 14 Javascript
理解javascript回调函数
Dec 28 Javascript
Javascript中With语句用法实例
May 14 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
Bootstrap popover用法详解
Dec 22 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
Aug 14 Javascript
js中的数组对象排序分析
Dec 11 Javascript
详解原生JS动态添加和删除类
Mar 26 Javascript
JavaScript生成一个不重复的ID的方法示例
Sep 16 Javascript
创建与框架无关的JavaScript插件
Dec 01 Javascript
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
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
ASP知识讲座四
2006/10/09 PHP
用sql命令修改数据表中的一个字段为非空(not null)的语句
2010/06/04 PHP
学习php过程中的一些注意点的总结
2013/10/25 PHP
PHP实现带进度条的Ajax文件上传功能示例
2019/07/02 PHP
基于PHP实现短信验证码发送次数限制
2020/07/11 PHP
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
JS支持带x身份证号码验证函数
2008/08/10 Javascript
javascript Deferred和递归次数限制实例
2014/10/21 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
jquery点击改变class并toggle的实现代码
2016/05/15 Javascript
JS原型链怎么理解
2016/06/27 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
移动端(微信等使用vConsole调试console的方法
2019/03/05 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
2019/05/16 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
[50:44]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第二场 2月22日
2021/03/11 DOTA
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
python实现画圆功能
2018/01/25 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
python标识符命名规范原理解析
2020/01/10 Python
python 实现控制鼠标键盘
2020/11/27 Python
linux centos 7.x 安装 python3.x 替换 python2.x的过程解析
2020/12/14 Python
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
班会关于环保演讲稿
2013/12/29 职场文书
毕业证丢失证明
2014/01/15 职场文书
2014年安全生产责任书
2014/07/22 职场文书
辞职信标准格式
2015/02/27 职场文书
给校长的建议书范文
2015/09/14 职场文书
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS