折叠菜单(jquery)

  1. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>accordionMenu可折叠菜单</title>
  6. 		<script src="js/jquery-3.3.1.min.js"></script>
  7. 		<style type="text/css">
  8. 			.div-outer {
  9. 				border: 1px solid;
  10. 				width: 300px;
  11. 			}
  13. 			.cls-img {
  14. 				margin-left: 200px;
  15. 			}
  16. 		</style>
  18. 		<script>
  19. 			$(function() {
  20. 				//初始化
  21. 				$(".cls-img").attr("src", "img/jt1.jpg");
  22. 				$(".div-content").hide();
  23. 				$(".cls-img").click(function() {
  24. 					var src = $(".cls-img").attr("src");
  25. 					if(src == "img/jt2.jpg") {
  26. 						$(".div-content:visible").slideUp();
  27. 						$(".cls-img").attr("src", "img/jt1.jpg");
  28. 					} else {
  29. 						$(".div-content:hidden").slideDown();
  30. 						$(".cls-img").attr("src", "img/jt2.jpg");
  31. 					}
  32. 				});
  33. 			});
  34. 		</script>
  35. 	</head>
  37. 	<body>
  38. 		<div class="div-outer">
  39. 			<div style="background-color: gainsboro;">
  40. 				图书分类
  41. 				<img src="img/jt1.jpg" class="cls-img" />
  42. 			</div>
  43. 			<div class="div-content">
  45. 				<table>
  46. 					<tr>
  47. 						<td>
  48. 							<a href="#">管理学</a>
  49. 						</td>
  50. 						<td>
  51. 							<a href="#">计算机</a>
  52. 						</td>
  53. 					</tr>
  54. 					<tr>
  55. 						<td>
  56. 							<a href="#">市场营销</a>
  57. 						</td>
  58. 						<td>
  59. 							<a href="#">道德与法</a>
  60. 						</td>
  61. 					</tr>
  62. 				</table>
  64. 			</div>
  65. 		</div>
  66. 	</body>
  68. </html>

JQuery案例：折叠菜单的更多相关文章

  1. jquery 展开折叠菜单

    jquery 展开折叠菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <ht ...

  2. jQuery&HTML&CSS3实现垂直手风琴折叠菜单方法讲解

    在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代 ...

  3. jQuery Accordion 插件用于创建折叠菜单

    jQuery Accordion 插件用于创建折叠菜单.它通常与嵌套的列表.定义列表或嵌套的 div 一起使用.选项用于指定结构.激活的元素和定制的动画. 后期完善

  4. 11款样式新颖的 jQuery/CSS3 网页菜单

    今天为大家准备了11款样式风格挺不错的jQuery/CSS3网页菜单,主要包括面包屑菜单.下拉菜单.Tab菜单等,喜欢的朋友赶紧收藏,一起来看看这些菜单. 1.jQuery / CSS3多功能下拉菜单 ...

  5. cocos2dx-lua使用UIListView制作二级折叠菜单

    折叠菜单,用过jquery accordion的同学都知道是啥玩艺儿~,图片效果就是介样: cocos2dx不带有此控件,因此我们动手来实现一个. 原理很简单,展开的时候往listview里inser ...

  6. 19款绚丽实用的jQuery/CSS3侧边栏菜单

    jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数的插件,特别是菜单插件更为丰富,本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单 ...

  7. jQuery弹性滑动导航菜单实现思路及代码

    <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <meta na ...

  8. 20151225jquery学习笔记---折叠菜单UI

    折叠菜单(accordion),和选项卡一样也是一种在同一个页面上切换不同内容的功能UI.它和选项卡的使用几乎没有什么太大区别,只是显示的效果有所差异罢了.一． 使用 accordion使用 acco ...

  9. devexpress设置皮肤、字体以及折叠菜单、伸缩Panel的实现

    1.为了体现系统的个性化,越来越多的系统增加了换肤功能.这里例举一个devexpress实现换肤的案例,效果图对比: 第二张图片中更换了皮肤与字体. 2.皮肤数据源绑定代码: //循环添加皮肤名称 f ...

随机推荐

  1. SpringApplication.run(xxx.class, args)背后的东东——整体脉络

    从spring到springmvc,再到springboot.springcloud,应用程序api开发调用方面都已经非常熟悉,但对spring背后的扩展机制:为何一个简单的main方法可以实现这么强 ...

  2. 程序员小抄——GitHub 热点速览 Vol.44

    作者:HelloGitHub-小鱼干 这周热点是什么?youtube-dl!就是那个超过 72+ star,又因为版权问题被 GitHub 关闭的项目,GitHub Trending 上一篇" ...

  3. adb命令如何获取appPackage和appActivity的信息

    如何获取appPackage和appActivity的信息,这里有一个极为实用的命令:adb shell dumpsys activity |find "mFocusedActivity&q ...

  4. 转载：解密Redis持久化

    本文内容来源于Redis作者博文,Redis作者说,他看到的所有针对Redis的讨论中,对Redis持久化的误解是最大的,于是他写了一篇长文来对Redis的持久化进行了系统性的论述.文章非常长,也很值 ...

  5. malloc,calloc,realloc三者的区别

    malloc,calloc,realloc三者都可以运用与动态分配数组. malloc:用malloc必须要自己初始化,可以用memset(arr,0,cnt*sizeof(int)) calloc: ...

  6. sdsd

    自本人拥有手机以来,由于有存短信的特殊嗜好,得出以下不完全统计: 累计中奖93次,资金共计2260万元(人民币),另有各种iphone68部, 电脑36台,轿车27辆,收到法院传票93张,被大学录取5 ...

  7. MySql中指定符号分割并分行展示

    1.涉及到的函数三个: 1.1 REPLACE('value','str1','str2') 用法规则:使用str2替换掉value中的所有的str1; SELECT REPLACE('我来了','来 ...

  8. php 正则金额验证

    $money_reg = '/^[1-9]\d*|^[1-9]\d*.\d+[1-9]$/';if(!preg_match($money_reg, $money)){ $this->ajaxEr ...

  9. 经典c程序100例==31--40

    [程序31] 题目:请输入星期几的第一个字母来判断一下是星期几,如果第一个字母一样,则继续 判断第二个字母. 1.程序分析:用情况语句比较好,如果第一个字母一样,则判断用情况语句或if语句判断第二个字 ...

  10. 目录方式扩展swap分区大小

    1.查看swap大小:free  -m  (-k|m|g) --以k|m|g为单位用去尾法显示大小  [root@lbg tmp]# free -m total        used        ...