jQuery结合CSS实现手风琴组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS DIV 1</title>
<link rel="stylesheet" type="text/css" href="1.css"></link>
<script type="text/javascript" src="jquery-3.0.0.js"></script>
<script type="text/javascript" src="1.js"></script>
</head>
<body>
<div id="main" class="main">
<div id="left" class="left">
<div id="leftTop" class="leftTop">
<div id="navDescription" class="navDescription">left</div>
<div id="navImg" class="navImg">
<img src="toLeft.png">
</div>
</div>
<div id="leftBottom" class="leftBottom">
<div class="leftBottom1">
<div id="leftBottom1" class="contentStyle">leftBottom1</div>
</div>
<div class="leftBottom2">
<div id="leftBottom2" class="contentStyle">leftBottom2</div>
</div>
<div class="leftBottom3">
<div id="leftBottom3" class="contentStyle">leftBottom3</div>
</div>
</div>
</div>
<div id="right" class="right">
<div id="rightContent" class="rightContent">right</div>
</div>
</div>
</body>
</html>
1.css
.main {
width: 1280px;
height: 300px;
background-color: #7FFFD4;
float: left;
}
.left {
float: left;
width: 20%;
height: 80%;
background-color: yellow;
}
.right {
float: right;
width: 80%;
height: 84%;
background-color: lightblue;
}
.rightContent{
height: inherit;
text-align: center;
vertical-align: bottom;
}
.leftTop {
}
.leftBottom {
margin-top: 60px;
}
.leftBottom1 {
height: 60px;
background-color: #00FF00;
border-top: 3px solid #FF0000;
}
.leftBottom2 {
height: 60px;
background-color: #FF00FF;
border-top: 3px solid #FF0000;
}
.leftBottom3 {
height: 60px;
background-color: #FFE4E1;
border-top: 3px solid #FF0000;
border-bottom: 3px solid #FF0000;
}
.navDescription {
float: left;
padding-top: 17px;
padding-left: 95px;
}
.navImg {
float: right;
height: 100%;
cursor: pointer;
}
.contentStyle{
padding-top: 18px;
padding-left: 70px;
cursor: pointer;
}
1.js
function toLeft() {
$(".left").css({
"width" : "2.5%"
});
$(".left .navDescription").css({
"display" : "none"
});
$("img").attr({
"src" : "toRight.png"
});
$(".right").css({
"width" : "97.5%"
});
$("img").attr({
"onclick" : "toRight();"
});
}
function toRight() {
$(".left").css({
"width" : "20%"
});
$(".right").css({
"width" : "80%"
});
$(".left .navDescription").css({
"display" : "block"
});
$("img").attr({
"src" : "toLeft.png"
});
$("img").attr({
"onclick" : "toLeft();"
});
}
function showLeftContentToRight(content){
var text = $(content).text();
$(".rightContent").text(text);
}
$().ready(function() {
if ("toLeft.png" === $("img").attr("src")) {
$("img").attr({
"onclick" : "toLeft();"
});
}
$("#leftBottom1").attr({"onclick":"showLeftContentToRight('#leftBottom1');"});
$("#leftBottom2").attr({"onclick":"showLeftContentToRight('#leftBottom2');"});
$("#leftBottom3").attr({"onclick":"showLeftContentToRight('#leftBottom3');"});
});
toLeft.png(图片来自"千图网")
toRight.png(图片来自"千图网")
jquery-3.0.0.js 官网下载地址如下:
http://jquery.com/
效果展示：
小结：用到的样式知识点
1. float
水平方向设置DIV块位置的属性。只有right和left两个属性值。
2. width height
若用百分比时，必须要有固定的高度/宽度值，否则不会有效果。(本例中的.main若没有设置具体的高度值，.right和.left的高度百分比是没有任何效果的)
3. position left right
若left 和 right 后面跟具体的px值，则postion必须设置为relative或者absolute,否则无效果。
4. 手型图标
cursor：pointer;
5. padding margin
padding 针对块区域内。
marging 针对块区域外。
6. 分隔条
border-bottom: 1px solid #C0C0C0;
不足之处:
静态资源(如图片路径、js文件的引用)没有实现模块化管理，下例中会补充。
jQuery结合CSS实现手风琴组件的更多相关文章
- jQuery结合CSS实现手风琴组件(2)----利用seajs实现静态资源模块化引入
1. 目录结构(webStrom) 2. 代码 1.html <!DOCTYPE html> <html lang="en"> <head> & ...
- CSS实现常用组件特效（不依赖JS）
我们已经习惯用 JavaScript 实现常见的 UI 功能组件,如手风琴.工具提示.文本截断等.但是随着 HTML 和 CSS 新特性的推出,不用再支持旧浏览器,我们可以越来越少用 JavaScri ...
- jquery垂直展开折叠手风琴二级菜单
摘要:jquery实现垂直展开二级菜单 最近新开发一个简单项目,用到左侧两级的菜单.找找了手头的文件,竟然没有现成的代码,算了,去网上找找整理下吧. 注:jquery-1.8.3.min.js需要下载 ...
- 第二百二十六节，jQuery EasyUI，Tree(树)组件
jQuery EasyUI,Tree(树)组件 本节课重点了解 EasyUI 中 Tree(树)组件的使用方法,这个组件依赖于 Draggable(拖 动)和 Droppable(放置)组件. 一．加 ...
- 第二百零九节，jQuery EasyUI，Pagination(分页)组件
jQuery EasyUI,Pagination(分页)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Pagination(分页)组件的使 ...
- 第二百零六节，jQuery EasyUI，Menu(菜单)组件
jQuery EasyUI,Menu(菜单)组件 学习要点: 1.加载方式 2.菜单项属性 3.菜单属性 4.菜单事件 5.菜单方法 本节课重点了解 EasyUI 中 Menu(菜单)组件的使用方法, ...
- 第二百零二节，jQuery EasyUI，Layout(布局)组件
jQuery EasyUI,Layout(布局)组件 学习要点: 1.加载方式 2.布局属性 3.区域面板属性 4.方法列表 本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法,这个 ...
- 第二百节，jQuery EasyUI，Tabs(选项卡)组件
jQuery EasyUI,Tabs(选项卡)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 5.选项卡面板 本节课重点了解 EasyUI 中 Tabs(选项卡)组件的使用方 ...
- 第一百九十九节，jQuery EasyUI，Panel(面板)组件
jQuery EasyUI,Panel(面板)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解EasyUI中Panel(面板)组件的使用方法,这个组件不依赖于其 ...
随机推荐
- YAML(YML)语法详解
ansible playbook是由yaml(yml)语法书写,结构清晰,可读性强,所以必须掌握yaml(yml)基础语法 语法 描述 锁进 YAML使用固定的缩进风格表示层级结构,每个缩进由两个空 ...
- EQ实现
原理参考: https://www.cnblogs.com/fellow1988/p/9189338.html https://www.cnblogs.com/fellow1988/p/9136346 ...
- Excel 不同文件、sheet 关联引用（vlookup函数）
有时候在excel办公中会遇到,两个sheet相同的一列数据,作为关联(就像数据库的表的外键),其中一个sheet想要获取另一个sheet的其他列数据,这样就用到了vlookup函数,下面演示一下: ...
- DockerToolbox安装docker - Windows 10
Wiindows安装docker 在转换成linux模式的时候不能使用,只能退而求其次安装Docker ToolBox在windows10中使用docker. 一.前言 由于本机使用的是win10家庭 ...
- 使用js处理后台返回的Date类型的数据
从后台返回的日期类型的数据,如果直接在前端进行显示的话,显示的就是一个从 1970-01-01 00:00:00到现在所经过的毫秒数,而在大多数业务中都不可能显示这个毫秒数,大多数都是显示一个正常的日 ...
- php对字符串的操作4之 字符串的格式化函数
strtolower($str ) strtoupper($str ) 大小写转换 strtotime('2018-1-1 0:0') 字符串转时间戳 date('Y-m-d H:i:s',time( ...
- Redis05——Redis五大数据类型 String
String String是Redis最基本的数据类型(较常用),一个key对应一个value string类型是二进制安全的,Redis的string可以包含任何数据 一个Redis中字符串valu ...
- shell脚本编程学习笔记（二）linux服务器启动流程
一.linux服务器启动流程 1.bios找到磁盘上的mbr主引导扇区 2.进入grub洁面选择相应的启动内核 3.读取kernel内核文件-/boot/vmlinuz-* 4.读取init的镜像文件 ...
- 有源汇有上下界最小流 （ZQU 1592)
这道题跟求最大流的时候差不多. 都是先构造可行流,然后判断是否可行, 可行的话,就利用残余流量,构造从汇点t跑到源点s的最大流, 如何求出答案呢. 在第一次求可行流的dinic后,跟求最大流的时候一样 ...
- [LEETCODE] 初级算法/数组 1.1删除排序数组中的重复项
题目: 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成. ...