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 { 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
/** * */ // 常量对象 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实现手风琴组件
时间: 2024-08-05 09:35:32