jq插件问题，一开始第一个li显示，之后鼠标移过之后，第一个li也跟着隐藏了

我想要的是，鼠标都离开之后第一个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>

sikey

浏览 2665回答 0

0回答

随时随地看视频慕课网APP