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 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
.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文件的引用)没有实现模块化管理，下例中会补充。

 

posted @   lvlin241  阅读(902)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
点击右上角即可分享
微信分享提示