我想要的是，鼠标都离开之后第一个Li还是在显示状态
<!DOCTYPE html>
<html>
<head>
<title>使用$.extend()扩展工具函数</title>
<script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
<style>
li,ul{list-style:none;}
a{width:100%;float:left;}
.a ul{ display:none}
</style>
</head>
<body>
<ul id="a">
<li class="a">
<a class="b" href="1">1</a>
<ul>
<li>11</li>
</ul>
</li>
<li class="a">
<a class="b" href="2">2</a>
<ul>
<li>22</li>
</ul>
</li>
</ul>
<script type="text/javascript">
; (function ($) {
$.fn.extend({
"change": function (col,cola) {
var $a=$("a").next();
$a.eq(0).show();
$(this).find("a").bind("mouseover",function(){
$(this).css('background',col);
$(this).next().show();
});
$(this).find("a").bind("mouseout",function(){
$(this).css("background",cola);
$(this).next().hide();
});
}
});
})(jQuery);
$(function () {
$("#a").change("yellow","white");
});
</script>
</body>
</html>