jquery with CSS for accordion components (2)----using SEAJS to realize modularization introduction of static resources

1. Directory Structure (WEBSTROM)

2. Code

1.html

<!     DOCTYPE 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
/** * *///constant object 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) {//Initialize constant object constent = Cont.getconstant (); Console.log ("Seajs Use load ... "); $ (document). Ready (The function () {Console.log (" Ready to load ... "), 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 Modular management of static resources (picture path) */define (function (require,exports,module) {function getconstant () {return {"rightnavimg": " Img/toright.png "," leftnavimg ":" Img/toleft.png "};} Module.exports = {getconstant:getconstant};});　　
Sea.js Official website: http://seajs.org/docs/#downloads
Jquery-3.0.0.js Official website: http://www.jq22.com/jquery-info122
3. Operation Effect--jquery combined with CSS to implement accordion components
jquery with CSS for accordion components (2)----using SEAJS to realize modularization introduction of static resources