折叠菜单(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. Java8新特性探索之Optional类

    为什么引入Optional类? 身为一名Java程序员,大家可能都有这样的经历:调用一个方法得到了返回值却不能直接将返回值作为参数去调用别的方法.我们首先要判断这个返回值是否为null,只有在非空的前 ...

  2. Java线程池初步解读

    好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star 几个月前,写了一篇<Java并发学习(一):进程和线 ...

  3. Hive 如何快速拉取大批量数据

    用hive来做数仓类操作,或者大数据的运算,是没有疑问的,至少在你没有更多选择之前. 当我们要hive来做类似于大批量数据的select时,也许问题就会发生了变化. 1. 通用解决方案之分页 首先,我 ...

  4. Django+Celery+xadmin实现异步任务和定时任务

    Django+Celery+xadmin实现异步任务和定时任务 关注公众号"轻松学编程"了解更多. 一.celery介绍 1.简介 [官网]http://www.celerypro ...

  5. Java中的常见数学运算

    1.舍掉小数取整:Math.floor(3.5)=3 2.四舍五入取整:Math.rint(3.5)=4 3.进位取整:Math.ceil(3.1)=4 4.取绝对值:Math.abs(-3.5)=3 ...

  6. 「BalticOI 2020」病毒

    AC自动机+DP最短路转移 怎么说呢,挺套路的,也不是太难,但是一上手会被大量的信息淹没思路,还是要注意关注主要信息,不要被一些细节卡住 由于抗体是要在基因序里面出现过,那么考虑把抗体的序列检出AC自 ...

  7. 求0到n之间素数个数的序列

    要求: (1) 找出0-1000之间素数(2) 设f(n)表示0-n之间的素数个数,计算出当n=0,1,2,3,.....,997时f(n)的值,并写入文件 分析: 首先找素数使用一个效率较高的方法- ...

  8. apache+php安装

    https://codebriefly.com/how-to-setup-apache-php-mysql-on-windows-10/ 出问题的地方 1.apache rewrite 模块开启 (去 ...

  9. Flink SQL Client初探

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  10. yum针对软件包操作的常用命令

    yum针对软件包操作的常用命令: 1.使用YUM查找软件包 命令:yum search php 2.列出所有可安装的软件包 命令:yum list php 3.列出所有可更新的软件包 命令:yum l ...