<!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实现手风琴组件的更多相关文章

  1. jQuery结合CSS实现手风琴组件(2)----利用seajs实现静态资源模块化引入

    1. 目录结构(webStrom) 2. 代码 1.html <!DOCTYPE html> <html lang="en"> <head> & ...

  2. CSS实现常用组件特效（不依赖JS）

    我们已经习惯用 JavaScript 实现常见的 UI 功能组件,如手风琴.工具提示.文本截断等.但是随着 HTML 和 CSS 新特性的推出,不用再支持旧浏览器,我们可以越来越少用 JavaScri ...

  3. jquery垂直展开折叠手风琴二级菜单

    摘要:jquery实现垂直展开二级菜单 最近新开发一个简单项目,用到左侧两级的菜单.找找了手头的文件,竟然没有现成的代码,算了,去网上找找整理下吧. 注:jquery-1.8.3.min.js需要下载 ...

  4. 第二百二十六节，jQuery EasyUI，Tree(树)组件

    jQuery EasyUI,Tree(树)组件 本节课重点了解 EasyUI 中 Tree(树)组件的使用方法,这个组件依赖于 Draggable(拖 动)和 Droppable(放置)组件. 一．加 ...

  5. 第二百零九节，jQuery EasyUI，Pagination(分页)组件

    jQuery EasyUI,Pagination(分页)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Pagination(分页)组件的使 ...

  6. 第二百零六节，jQuery EasyUI，Menu(菜单)组件

    jQuery EasyUI,Menu(菜单)组件 学习要点: 1.加载方式 2.菜单项属性 3.菜单属性 4.菜单事件 5.菜单方法 本节课重点了解 EasyUI 中 Menu(菜单)组件的使用方法, ...

  7. 第二百零二节，jQuery EasyUI，Layout(布局)组件

    jQuery EasyUI,Layout(布局)组件 学习要点: 1.加载方式 2.布局属性 3.区域面板属性 4.方法列表 本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法,这个 ...

  8. 第二百节，jQuery EasyUI，Tabs(选项卡)组件

    jQuery EasyUI,Tabs(选项卡)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 5.选项卡面板 本节课重点了解 EasyUI 中 Tabs(选项卡)组件的使用方 ...

  9. 第一百九十九节，jQuery EasyUI，Panel(面板)组件

    jQuery EasyUI,Panel(面板)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解EasyUI中Panel(面板)组件的使用方法,这个组件不依赖于其 ...

随机推荐

  1. Led Night Light Factory: Traveler Led Night Light

    Wake up in a strange hotel room in the evening and find the way to the bathroom, without stepping on ...

  2. ABB 机器人 流水灯and跑马灯

    MODULE MainModule VAR signaldi signaldi14; PROC main() //di14_test 数字输入信号 WHILE di14_test = DO ycld; ...

  3. python+selenium：浏览器webdriver操作(0)

    1.浏览器最大化 启动的浏览器不是全屏的,这样不会影响脚本的执行,但是有时候会影响我们“观看”脚本的执行. #coding=utf-8 from selenium import webdriver i ...

  4. 【做题笔记】CF1311A、B、C

    或许以后会有D. A 题目大意:给定两个整数 \(a,b\) ,每次可以进行一下任意一个操作: \(a\) 加上任意一个正奇数 \(b\) 减去任意一个正偶数 问是否可以通过若干次操作把 \(a\) ...

  5. Vue实例 动态组件实现选项卡

    动态组件 选项卡 有n种实现方法 哈哈哈哈 <style> #app{ width: 260px; height: 200px; background: #fff; box-shadow: ...

  6. opencv：USM锐化

    USM:unsharp mask 对小的细节干扰小,对大的细节进行锐化 Mat dst; Mat blur_image; GaussianBlur(src, blur_image, Size(3, 3 ...

  7. yii2 gii开启

    gii模块可以通过配置yii\base\Application::modules属性开启它.在config/web.php文件中会有以下配置代码: $config = [ ... ]; if (YII ...

  8. 使用ltp4j碰到Can't find dependent libraries报错信息的问题解决

    项目中使用了哈工大的自然语言处理模块ltp4j,使用idea工具集成到项目中之后,在本机运行没有问题,一切正常.打成war包,部署到服务器上,使用的时候报错Can't find dependent l ...

  9. linux 磁盘100% 清理

    df -h  查看磁盘使用有一个vdb满了 df   -i 查看inode 使用率 显示文件大小: du -sh /* du参数: -a : 列出所有的文件与目录容量,因为默认仅统计目录下面的文件量而 ...

  10. 神经网络之反向传播算法（BP）公式推导（超详细）

    反向传播算法详细推导 反向传播(英语:Backpropagation,缩写为BP)是"误差反向传播"的简称,是一种与最优化方法(如梯度下降法)结合使用的,用来训练人工神经网络的常见 ...