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'); }); }