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

jQuery结合CSS实现手风琴组件(2)----利用seajs实现静态资源模块化引入的更多相关文章

  1. jQuery结合CSS实现手风琴组件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 使用 jQuery 选择器获取页面元素后，利用 jQuery 对象的 css() 方法设置其样式。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式. 要求如下: 点击页面的"更改样式"按钮后, ...

  3. 使用 jQuery 选择器获取页面元素，然后利用 jQuery 对象的 css() 方法设置其 display 样式属性，从而实现显示和隐藏效果。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...

  4. 如何利用 jQuery 修改 css 中带有 !important 的样式属性？

    使用 jQuery 修改 css 中带有 !important 的样式属性 外部样式为: div.test { width:auto !important; overflow:auto !import ...

  5. CSS实现常用组件特效（不依赖JS）

    我们已经习惯用 JavaScript 实现常见的 UI 功能组件,如手风琴.工具提示.文本截断等.但是随着 HTML 和 CSS 新特性的推出,不用再支持旧浏览器,我们可以越来越少用 JavaScri ...

  6. jquery的css详解（一）

    通过阅读源码可以发现css是jq的实例方法.而在内部调用jq的工具方法access来实现的,对该方法不了解的朋友请点击 -> jquery工具方法access详解 在access的回调中做了一个 ...

  7. jquery垂直展开折叠手风琴二级菜单

    摘要:jquery实现垂直展开二级菜单 最近新开发一个简单项目,用到左侧两级的菜单.找找了手头的文件,竟然没有现成的代码,算了,去网上找找整理下吧. 注:jquery-1.8.3.min.js需要下载 ...

  8. sencha touch 扩展篇之使用sass自定义主题样式 （下）通过css修改官方组件样式以及自定义图标

    上一讲我们讲解了如何使用官方的api来修改主题样式,这讲我们继续讲解sass的样式修改, 编译官方自带的主题包  在生成的项目以及官方sdk的目录下,自带了一些主题sass包,我们也可以通过修改sas ...

  9. 第二百二十六节，jQuery EasyUI，Tree(树)组件

    jQuery EasyUI,Tree(树)组件 本节课重点了解 EasyUI 中 Tree(树)组件的使用方法,这个组件依赖于 Draggable(拖 动)和 Droppable(放置)组件. 一．加 ...

随机推荐

  1. mybatis报错：A query was run and no Result Maps were found for the Mapped Statement、、Property [login_ip] not found on type [com.thinkgem.jeesite.common.permission.entity.PremissUser]问题解决

    今天在做ssm项目的时候出现了: 先是出现 了错误: mybatis报错:A query was run and no Result Maps were found for the Mapped St ...

  2. 微信小程序 scroll-view 左右横向滑动没有效果（无法滑动）问题

    小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动之分,在这次项目中刚好需要用到横向滑动,但在测试过程中发现横向滑动没有了效果(静止在那里没移动过),经调试发现: 1.scroll ...

  3. 2019年9月2日，亲自最新JDK12.0.2和JRE1.8.0的下载和配置（64bit），被其他教程坑了几圈忍不住自己写一篇

    前因/ 新买了电脑,想在家写前端页面,看到最新版的JDK12.0.2和JRE1.8.0,就想着要用就用最新的,才对得起我的I9电脑.本人也是半生不熟,公司用的都是前辈配置好的环境,并且是JDK8很老了 ...

  4. linux 压测jmeter24h稳定性测试

    环境准备: 安装jmeter,JDK: wget  https://archive.apache.org/dist/jmeter/binaries/apache-jmeter-5.1.tgz cd  ...

  5. sqlserver 查看视图语句

    本人sql小白一个,在项目中遇到了视图的使用,但是不知道视图的语句怎么查看,所以在网上搜索了一下,查到了一下的查看方式,再次记录一下: 方法一->前提: 已经创建好的视图 sp_helptext ...

  6. 关于Excel，你一定用的到的36个Python函数

    从Excel到Python:最常用的36个Pandas函数关于Excel,你一定用的到的36个Python函数 本文涉及pandas最常用的36个函数,通过这些函数介绍如何完成数据生成和导入.数据清洗 ...

  7. jmeter的使用---录制脚本

    1.设置fidder 2.在fidder中导出请求,选择jmx格式

  8. Codeforces Round #598 (Div. 3) C. Platforms Jumping

    There is a river of width nn. The left bank of the river is cell 00 and the right bank is cell n+1n+ ...

  9. RLE压缩算法详解

    from:http://data.biancheng.net/view/152.html RLE压缩算法(下简称RLE算法)的基本思路是把数据按照线性序列分成两种情况:一种是连续的重复数据块,另一种是 ...

  10. UVA 11464 偶数矩阵（递推 | 进制）

    题目链接:https://vjudge.net/problem/UVA-11464 一道比较好的题目. 思路如下: 如果我们枚举每一个数字“变”还是“不变”,那么需要枚举$2^{255}$种情况,很显 ...