JQuery案例：折叠菜单
折叠菜单(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案例：折叠菜单的更多相关文章
- jquery 展开折叠菜单
jquery 展开折叠菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <ht ...
- jQuery&HTML&CSS3实现垂直手风琴折叠菜单方法讲解
在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代 ...
- jQuery Accordion 插件用于创建折叠菜单
jQuery Accordion 插件用于创建折叠菜单.它通常与嵌套的列表.定义列表或嵌套的 div 一起使用.选项用于指定结构.激活的元素和定制的动画. 后期完善
- 11款样式新颖的 jQuery/CSS3 网页菜单
今天为大家准备了11款样式风格挺不错的jQuery/CSS3网页菜单,主要包括面包屑菜单.下拉菜单.Tab菜单等,喜欢的朋友赶紧收藏,一起来看看这些菜单. 1.jQuery / CSS3多功能下拉菜单 ...
- cocos2dx-lua使用UIListView制作二级折叠菜单
折叠菜单,用过jquery accordion的同学都知道是啥玩艺儿~,图片效果就是介样: cocos2dx不带有此控件,因此我们动手来实现一个. 原理很简单,展开的时候往listview里inser ...
- 19款绚丽实用的jQuery/CSS3侧边栏菜单
jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数的插件,特别是菜单插件更为丰富,本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单 ...
- jQuery弹性滑动导航菜单实现思路及代码
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <meta na ...
- 20151225jquery学习笔记---折叠菜单UI
折叠菜单(accordion),和选项卡一样也是一种在同一个页面上切换不同内容的功能UI.它和选项卡的使用几乎没有什么太大区别,只是显示的效果有所差异罢了.一． 使用 accordion使用 acco ...
- devexpress设置皮肤、字体以及折叠菜单、伸缩Panel的实现
1.为了体现系统的个性化,越来越多的系统增加了换肤功能.这里例举一个devexpress实现换肤的案例,效果图对比: 第二张图片中更换了皮肤与字体. 2.皮肤数据源绑定代码: //循环添加皮肤名称 f ...
随机推荐
- 码农会锁，synchronized 对象头结构(mark-word、Klass Pointer)、指针压缩、锁竞争，源码解毒、深度分析！
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 感觉什么都不会,从哪开始呀! 这是最近我总能被问到的问题,也确实是.一个初入编程职场 ...
- 10 Servlet_02 资源跳转（主要是内部转发）与中文乱码问题
总的知识点: 1.小的知识点总结: alt + shift + r 重命名快捷键(可以给包和类以及项目重命名) 有序列表 ol li 无序列表 ul type 格式 text 是文本类型 passwo ...
- Gym102012A Rikka with Minimum Spanning Trees
题意 \(T\) 组数据,每组数据给定一个 \(n\) 个点,\(m\) 条边,可能含有重边自环的图,求出最小生成树的个数与边权和的乘积,对 \(10^9+7\) 取模. \(\texttt{Data ...
- windows下redis的PHP扩展安装
1.查看已安装PHP的信息,打印phpinfo(); 主要看三个信息:PHP版本,是否线程安全(TS或NTS),系统是x64还是x86.用以确定扩展文件的版本. 2.需要php_redis.dll这个 ...
- 【kata Daily 190905】What's a Perfect Power anyway?（完美幂）
原题: A perfect power is a classification of positive integers: In mathematics, a perfect power is a p ...
- 内网渗透 day13-漏洞复现
漏洞复现 目录 1. 永恒之蓝(445端口) 2. 手动微笑漏洞(21端口 vsftpd2.3.4版本) 3. ingres数据库DBMS后门(1524端口) 4. distcc漏洞(3632) 5. ...
- kali xHydra使用
简介: Hydra是一款登录爆破神器,Hydar几乎可以爆破各种协议的登录,比如windows的远程桌面.ssh.ftp.路由交换设备等等. Hydar在kali linux默认已经安装. 大概介绍一 ...
- nat+端口转发,使得宿主机secureCRT可以访问vbox里linux虚拟机
环境:vbox或者叫vitrualbox连接虚拟机,由于公司内网不能分配IP(不知道是不是这个原因),虚拟机用桥接得不到IP,没法实现虚拟机和宿主互相访问,于是用NAT. 遗憾:NAT是能连接网络,也 ...
- AI时代，还不了解大数据？
如果要问最近几年,IT行业哪个技术方向最火?一定属于ABC,即AI + Big Data + Cloud,也就是人工智能.大数据和云计算. 这几年,随着互联网大潮走向低谷,同时传统企业纷纷进行数字化转 ...
- Mybatis执行SQL的流程
前篇:Mybatis初始化过程 SqlSession : SqlSession是一个接口,它有两个实现类:DefaultSqlSession (默认)和 SqlSessionManager (弃用,不 ...