JQuery hover toggle事件使用：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>b index</title>
<link rel='stylesheet' type="text/css" href='b/css/bootstrap.css'>
<style type="text/css">
.s1{
width: 100px;
height: 100px;
background-color: pink;
}
.s2{
width: 50px;
height: 50px;
background-color: green;
}
</style>
</head>
<body style="margin:1px;">
<div id="div001">div001</div>
<div id='div002'>div002</div>
<div id='div003'>div003</div>
<div>
<button id="btn001">click me to div003 toggle </button>
<button id="btn002">click me to div003 toggle(fn1,fn2,fn3) </button>
</div>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="b/js/bootstrap.js"></script>
<script type="text/javascript" src="js/index038.js"></script>
</body>
</html>
$(function() {
$('#div001').hover(div001in, div001out);
// 这种情况下，mouseenter和mouseleave事件都是执行这个div001in函数；
$('#div002').hover(div001in);
$('#btn001').click(btn001Click);
$('#btn002').click(btn002Click);
});
function div001in(e) {
$(this).addClass('s1');
console.log(e.target.id + "---" + e.type);
}
function div001out() {
$(this).removeClass();
}
function btn001Click() {
$('#div003').toggle();
}
function btn002Click() {
// 只能传入一个函数，传入两个以上就会报错；可以使用'fast'参数，如果不使用，默认会是slow；
// 当前效果是显示/隐藏之后执行function函数；
$('#div003').toggle('fast', function() {
console.log('fn1');
});
}