<script type="text/javascript">
$(function() {
$("div#leftMenu")
.css("background-color", "chartreuse")
.css("border", "dotted thin red")
.css("width", "280px")
$("div#leftMenu>ul>li~div")
.css("display", "none");
function fnClick() {
$("div#leftMenu>ul>li~div")
.css("display", "none");
$(this).next()
.css("display", "block");
}
$("div#leftMenu>ul>li")
.bind({
click: fnClick,
mouseover: function() {
$(this)
.css("background-color", "orange")
.css("color", "white")
.css("font-weight", "bold");
},
mouseout: function() {
$(this)
.css("background-color", "lightskyblue")
.css("color", "black")
.css("font-weight", "normal");
}
});
$("dd")
.bind({
mouseover: function() {
$(this)
.css("background-color", "pink")
.css("color", "blueviolet")
.css("font-weight", "bold");
},
mouseout: function() {
$(this)
.css("background-color", "chartreuse")
.css("color", "black")
.css("font-weight", "normal");
}
});
});
</script>
<style type="text/css">
ul {
padding: 0px;
margin: 0px;
}
li {
list-style: none;
padding: 10px;
margin: 2px;
text-align: center;
background-color: lightskyblue;
}
dd {
padding: 4px;
margin: 3px;
text-align: center;
}
a:hover,
a:active,
a:link {
text-decoration: none;
color: white;
}
</style>
</head>
<body>
<div id="menu">
<table border="0" cellpadding="0" cellspacing="0">
<tr style="background-color: darkblue;">
<th> </th>
<th width="20">
<a href="#" onclick="$('#menu').hide();">×</a>
</th>
</tr>
<tr>
<th colspan="2">
<div id="leftMenu">
<ul>
<li>菜单一</li>
<div class="subMenu">
<dd>子菜单11</dd>
<dd>子菜单12</dd>
<dd>子菜单13</dd>
<dd>子菜单14</dd>
</div>
<li>菜单二</li>
<div class="subMenu">
<dd>子菜单21</dd>
<dd>子菜单22</dd>
<dd>子菜单23</dd>
<dd>子菜单24</dd>
</div>
<li>菜单三</li>
<div class="subMenu">
<dd>子菜单31</dd>
<dd>子菜单32</dd>
<dd>子菜单33</dd>
<dd>子菜单34</dd>
</div>
<li>菜单四</li>
<div class="subMenu">
<dd>子菜单41</dd>
<dd>子菜单42</dd>
<dd>子菜单43</dd>
<dd>子菜单44</dd>
</div>
<li>菜单五</li>
<div class="subMenu">
<dd>子菜单51</dd>
<dd>子菜单52</dd>
<dd>子菜单53</dd>
<dd>子菜单54</dd>
</div>
</ul>
</div>
</th>
</tr>
</table>
</div>
<input type="button" value="菜单" onclick="$('#menu').show();" />
<input type="button" value="撤销" onclick="$('div#leftMenu>ul>li,dd').unbind();" />
<p>jQuery鼠标事件例子2：在例子1的基础上多运用了bind（）--绑定多个事件，在菜单按钮部分运用了show（），在右上角的叉号运用了hide（）方法，在撤销按钮运用了unbind（）方法--移出事件。</p>
</body>