首页 > 代码库 > jQuery结合CSS实现手风琴组件

jQuery结合CSS实现手风琴组件

2024-08-22 04:25:12   222人阅读

<!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实现手风琴组件


联系
我们