<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~div").hide("slow");
$(this).next().show("fast");
// $("div#leftMenu>ul>li~div").slideDown("fast");
// $(this).next().slideUp("slow");
}
$("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")
.hover( //组合事件。相当于mouseover加上mouseout
function() {
$(this)
.css("background-color", "pink")
.css("color", "blueviolet")
.css("font-weight", "bold");
},
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>鼠标事件例子3：在例子2的基础上多运用了动画效果show（）和hide（）带参数方法，以及说明组合事件：hover（）的写法</p>
</body>