1. 目录结构(webStrom)
2. 代码
1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS DIV 1</title>
<script type="text/javascript" src="js/jquery-3.0.0.js"></script>
<link href="css/1.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="js/sea.js"></script>
<script type="text/javascript" src="js/app/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="img/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 {
1280px;
height: 300px;
background-color: #7FFFD4;
float: left;
}
.left {
float: left;
20%;
height: 80%;
background-color: yellow;
}
.right {
float: right;
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
/**
*
*/
// 常量对象
var constent;
function toLeft() {
$(".left").css({
"width" : "2.5%"
});
$(".left .navDescription").css({
"display" : "none"
});
$("img").attr({
"src" : constent.rightNavImg
});
$(".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" : constent.leftNavImg
});
$("img").attr({
"onclick" : "toLeft();"
});
}
function showLeftContentToRight(content) {
var text = $(content).text();
$(".rightContent").text(text);
}
seajs.use("const/cont.js", function(cont) {
// 初始化常量对象
constent = cont.getConstant();
console.log("seajs use 加载... ");
$(document).ready(function() {
console.log("ready 加载... ");
if (constent.leftNavImg === $("img").attr("src")) {
$("img").attr({
"onclick" : "toLeft();"
});
}
$("#leftBottom1").attr({
"onclick" : "showLeftContentToRight('#leftBottom1');"
});
$("#leftBottom2").attr({
"onclick" : "showLeftContentToRight('#leftBottom2');"
});
$("#leftBottom3").attr({
"onclick" : "showLeftContentToRight('#leftBottom3');"
});
});
});
cont.js
/**
* seajs 模块化管理静态资源(图片路径)
*/
define(function(require,exports,module){
function getConstant(){
return {
"rightNavImg":"img/toRight.png",
"leftNavImg":"img/toLeft.png"
};
}
module.exports = {
getConstant : getConstant
};
});
sea.js 官网: http://seajs.org/docs/#downloads
jquery-3.0.0.js 官网:http://www.jq22.com/jquery-info122
3. 运行效果-- jQuery结合CSS实现手风琴组件