添加和删​​除类 jQuery

Question

我有一个简单的 2 级菜单，如果鼠标悬停，上层菜单应该会“选中”类，当移动到另一个一级菜单项时，应该删除该类。但这不是问题，这已经奏效了。

我的问题是：第一级菜单项应该留在“已选择”，直到我继续另一个第一级菜单项。到目前为止，只要我将鼠标从项目上移开，我的脚本就会删除“选定”类

<script type="text/javascript">
    $(document).ready(function(){
        $("#navi li").hover(function(){
            $(this).addClass('selected');
        },function(){
            $(this).removeClass('selected');
        });
    });
</script>

我希望一旦我的鼠标位于另一个项目上时，所有具有“已选择”类的项目都将其类删除，但如果鼠标仅位于子菜单项或页面上任何可能的位置，则选中的项目应保持选中状态。

Answer 1

这就是你所追求的吗？您可以在悬停时删除所有选定的类，然后将选定的类添加到所需的元素中。

 $(document).ready(function(){
        $("#navi li").hover(function(){
            $("#navi li").removeClass('selected');
            $(this).addClass('selected');
        }
    });

Answer 2

尝试绑定到mousemove 事件：

$("ul").mousemove(function (e) {
    if (e.target.tagName == "LI") {
         $(".selected").removeClass("selected");
         $(e.target).addClass("selected");        
    }
});​

Demo.

Answer 3

发生这种情况是因为以下 lin：

},function(){
                $(this).removeClass('selected');
            });

这意味着当您将鼠标移出时，上述回调将被执行..

改为这样做：

 $(document).ready(function(){
            $("#navi li").hover(function(){
                $(this).addClass('selected');
            },function(){ });
        });

http://jsfiddle.net/SyvYv/

参考http://api.jquery.com/hover/