折叠菜单(jquery)

<html>

	<head>

		<meta charset="UTF-8">

		<title>accordionMenu可折叠菜单</title>

		<script src="js/jquery-3.3.1.min.js"></script>

		<style type="text/css">

			.div-outer {

				border: 1px solid;

				width: 300px;

			}

			.cls-img {

				margin-left: 200px;

			}

		</style>

		<script>

			$(function() {

				//初始化

				$(".cls-img").attr("src", "img/jt1.jpg");

				$(".div-content").hide();

				$(".cls-img").click(function() {

					var src = $(".cls-img").attr("src");

					if(src == "img/jt2.jpg") {

						$(".div-content:visible").slideUp();

						$(".cls-img").attr("src", "img/jt1.jpg");

					} else {

						$(".div-content:hidden").slideDown();

						$(".cls-img").attr("src", "img/jt2.jpg");

					}

				});

			});

		</script>

	</head>

	<body>

		<div class="div-outer">

			<div style="background-color: gainsboro;">

				图书分类

				<img src="img/jt1.jpg" class="cls-img" />

			</div>

			<div class="div-content">

				<table>

					<tr>

						<td>

							<a href="#">管理学</a>

						</td>

						<td>

							<a href="#">计算机</a>

						</td>

					</tr>

					<tr>

						<td>

							<a href="#">市场营销</a>

						</td>

						<td>

							<a href="#">道德与法</a>

						</td>

					</tr>

				</table>

			</div>

		</div>

	</body>

</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. 物流一站式单号查询之快递鸟API接口（附Demo源码）

    连载篇提前看 物流一站式单号查询之快递鸟API接口 物流一站式查询之TrackingMore篇 物流一站式查询之顺丰接口篇 物流一站式查询之快递100 前情提要 前三篇中,我们已经从注册.申请接口.调 ...

  2. Centos7安装Gitlab11

    一.基础介绍 1.简介 一个基于GIT的源码托管解决方案 基于rubyonrails开发 集成了nginx postgreSQL redis sidekiq等组件 2.安装要求 2g内存以上,有点占内 ...

  3. .netcore3.1使用log4net/nlog记录日志

    .netcore3.1使用log4net/nlog记录日志 .netcore3.1与2.x之间很是有不少差异的.本来想通过ctrl+c,ctrl+v将在2.2中实现的简单日志记录搬到.netcore3 ...

  4. 直播平台搭建之音视频开发：认识主流视频编码技术H.264

    H.264简介 什么是H.264?H.264是一种高性能的视频编解码技术.目前国际上制定视频编解码技术的组织有两个,一个是"国际电联",它制定的标准有H.261.H.263.H.2 ...

  5. react 实现组件嵌套以及子组件与父组件之间的通信

    当子组件触发onChange事件时,实际调用的是父组件中的handelSelect函数,通俗来说就是父组件通过属性handleSelect实现与子组件之间的通信. 父组件:SignupForm 子组件 ...

  6. linux + MongoDB 安装 + 部署 + 讲解 （满满干货看完记得收藏噢）

    话不多说开始了! 安装 安装就依据菜鸟教程的进行安装 传送门 => https://www.runoob.com/mongodb/mongodb-linux-install.html 好啦!现在 ...

  7. 1.python的函数参数传递

    1 Python的函数参数传递 看两个例子: a = 1 def fun(a): a = 2 fun(a) print a # 1 a = [] def fun(a): a.append(1) fun ...

  8. [收藏] 传说中的12306买票插件-chrome专用

    12306.cn买票,难死了,登录登录登录... 现在不用了... js插件+chrome浏览器: /* * 12306 Auto Query => A javascript snippet t ...

  9. 利用Github Action和.Net 5 自动执行米游社原神每日签到福利

    GenshinDailyHelper 原神的签到福利是需要单独下载APP进行才可以领取,并且每天需要打卡,虽然奖励并不是很可观,但有一些摩拉,食材和可观的经验书累计起来还是挺有吸引力的.可能本身不怎么 ...

  10. Apache Shiro (Shiro-550)(cve_2016_4437)远程代码执行 - 漏洞复现

    0x00 漏洞原理 Apache Shiro框架提供了记住密码的功能(RememberMe),用户登录成功后会生成经过加密并编码的cookie.在服务端对rememberMe的cookie值, 先ba ...